Javascript将div拖动到视口(viewport)容器内

Question

我正在尝试为移动设备实现拖放功能...有一个具有固定宽度/高度的容器 div，其中有另一个包含内容的 div，但它的大小比父级大得多。

我的问题是，一旦我点击可拖动的div，我就可以移动它，但我并没有真正找到任何解决方案来保持可拖动元素位置在每次在屏幕上开始触摸移动时相同。

我尽量将其保持在最低限度 我也不想使用 jQueryUI

附注拖动元素只能在桌面上使用触摸模拟进行操作

这是一个例子 JSFiddle

这是我的代码

<div class="container">
    <div class="draggable">

    </div>
</div>

<script>
    $(document).on('touchmove','.draggable',function(e){

        //Prevent default for mobile devices so the element inside the container can be dragged witouth stopping
        //e.preventDefault();

        //Calculating the distance where the touch event stopped
        var xPos = e.originalEvent.touches[0].pageX;
        var yPos = e.originalEvent.touches[0].pageY;


        //Moving the draggable element around
        $(this).css({
            left: xPos + $(this).offset().left + 'px',
            top: yPos + $(this).offset().top + 'px'
        });

    });
</script>

<style>
    .container
    {
        width:200px;
        height:200px;
        overflow:hidden;
        position:relative;
    }
    .draggable
    {
        width:1000px;
        height:1000px;
        background:url('http://th04.deviantart.net/fs71/PRE/f/2014/249/d/f/seraphim_by_alexiuss-d7y4v0o.jpg');
        position:relative;
    }
</style>

Answer 1

您需要获取位置的变化，而不是当前位置。所以这意味着您需要在 touchstart 上获取 pageX 和 pageY 将它们保存在稍后可以访问的某个变量中，也许像这个:

var touch_x= 0;
var touch_y= 0;

在 touchstart 上，您可以将 touch_x 和 touch_y 设置为当前的 pageX 和 pageY.

然后在 touchmove 上您可以引用它并找到差异。因此，您不会按 pageX 移动，而是按 touch_x - pageX 移动。这将导致你朝积极和消极的方向发展。您当前的代码将始终为正数，因此只会朝正方向移动。