Question

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

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

我尽量保持这个尽可能小另外我不想使用jQueryUI

P.S。拖动元素只能通过触摸仿真在桌面上使用

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

你需要改变位置，即当前位置。那么这意味着你需要在pageX上获取pageY和touchstart来保存稍后可以访问的变量，可能是这样的：

var touch_x= 0;
var touch_y= 0;

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

然后在touchmove上你可以参考并发现差异。所以你不要靠pageX移动touch_x - pageX。这将导致您向正方向和负方向移动。您当前的代码将始终具有正数，因此只能向正方向移动。

Javascript在视口容器中拖动div

1 个答案: