Javascript从鼠标位置拖动?

时间:2012-09-09 05:03:25

标签: javascript jquery

我有一个脚本,允许用户在iOS上的屏幕上拖动div,就像现在一样,当你开始拖动div时,它会使可拖动点成为中心。是否可以在用户触摸的任何地方提出这一点?

代码如下所示:

    xPos = drag.offsetWidth / 2;
    yPos = drag.offsetHeight / 2;
    drag.addEventListener("touchmove", function() {
        event.preventDefault();
        $(this).css({
            "left" : event.targetTouches[0].pageX - xPos + "px", 
            "top" : event.targetTouches[0].pageY - yPos + "px",
            "z-index" : "1000"
        });
        $("div").not(this).css("z-index", "1"); 
        $("div[id]").each(function() {
            var id = $(this).attr("id");
            localStorage.setItem(id + "-z","1");
        });     
    });

无论如何,我可以做到这样,偏移是远离用户的手指远离盒子的边缘?


我认为以下内容可能会起作用,但似乎并不存在,所有这一切都会导致抖动:

$(this).css({
"left" : event.targetTouches[0].pageX - parseInt($(this).css("left"), 10) +  "px", 
"top" : event.targetTouches[0].pageY  - parseInt($(this).css("top"), 10) +  "px",
});

1 个答案:

答案 0 :(得分:0)

想出来。测试后,以下内容仅生成父级左侧或顶部的像素数。

event.targetTouches[0].pageX - $(this).offset().left

诀窍是减去 FROM event.targetTouches[0].pageX,这是手指离屏幕边缘的像素数。

因此,完成的代码如下所示:

drag.addEventListener("touchstart", function() {
    left = event.targetTouches[0].pageX - $(this).offset().left;
    top = event.targetTouches[0].pageY - $(this).offset().top;
});
drag.addEventListener("touchmove", function() {
    $(this).css({
        "left" : event.targetTouches[0].pageX - left + "px", 
        "top" :  event.targetTouches[0].pageY - top + "px",
    });
});