mousedown 和 mouseup 拖动功能触摸屏？答案

【问题标题】：mousedown and mouseup dragging function touch screen?mousedown 和 mouseup 拖动功能触摸屏？
【发布时间】：2016-02-22 07:10:42
【问题描述】：

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

我的问题是，我也需要它在触摸屏上工作。有什么想法吗？

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

当用户点击back div 时，如果他一直按住鼠标，此函数将返回true，然后当他移动鼠标时，我会更改背景位置。如何让它也能在联系中工作？

我的完整脚本：

https://jsfiddle.net/mnu2da0L/

【问题讨论】：

你可以试试$("#back").on('mouseenter touchstart, function....
我也认为你需要使用mousemove，这样你的图像就会跟随你的图像

标签： jquery

【解决方案1】：

我希望这是你想要的；

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 touchstart 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)
    });    
});

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

<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>

【讨论】：