Question

我有一个jquery函数，可以在用户点击图片时移动背景。

我的问题是，我也需要它在触摸屏上工作。任何想法？

var isDragging = "false";
$("#back").mousedown(function() {
    isDragging = "true";
})
$("#back").mouseup(function() {
    isDragging = "false";
});

当用户点击back div时，如果他保持mousedown，此函数将返回true，然后当他移动鼠标时我改变背景位置。如何使它与触摸工作？

我的完整脚本：

https://jsfiddle.net/mnu2da0L/

Answer 1

我希望这是你想要的;

＆＃13;

var isDragging = "false";

function dragImage(e){
    if(isDragging == "true"){

        var mY=0;

        var x = e.pageX;
        var y = e.pageY;

        $('#back').css('background-position', x + 'px ' + y + 'px');
    }
    $("#drag").text(isDragging);
}
$("#back").on('mouseenter touchestart mousemove', function(e){
    isDragging = "true";
    dragImage(e)
})
$("#back").on('mouseleave touchend', function(e){
    isDragging = "false";
    dragImage(e)
})
$("#back").click(function(e){

    // function to check dragging
    $("#back").mousedown(function() {
        isDragging = "true";
    })
    $("#back").mouseup(function() {
        isDragging = "false";
    })

    document.getElementById("back").style.cursor = "all-scroll";

    //change position
    $('#back').mousemove(function(e){
        dragImage(e)
    });    
});

＆＃13;

#back{
  width:200px;
  height:200px;
  background-image:url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Gumbo_Limbo_Tree_DeSoto_National_Monument.JPG);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="back"></div>

<span id=drag>click in the image above to drag</span>

＆＃13;

mousedown和mouseup拖动功能触摸屏？

1 个答案: