Javascript在视口容器内拖动div

Question

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

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

我尽量减少这种情况 我也不想使用 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。这将导致你在积极和消极的方向上移动。您当前的代码将始终具有正数，因此只会朝正方向移动。