视口容器中的Javascript拖动div

Question

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

我的问题是，一旦我单击可拖动的div，就可以对其进行移动，但是我找不到真正的解决方案来使每次在屏幕上开始touchmove时可拖动的元素位置保持相同。

我尝试将其保持在最小限度，而且我也不想使用jQueryUI

PS拖动元素仅可通过使用触摸仿真在桌面上使用

这是一个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

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

var touch_x= 0;
var touch_y= 0;

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

然后在touchmove您可以参考并找出差异。 因此，您pageX按pageX移动，而touch_x - pageX按touch_x - pageX移动。 这将导致您朝着正向和反向移动。 您当前的代码将始终为正数，因此只能朝正方向移动。