0

我有一些用于垂直拖放的非常简单的拖放 jQuery 代码：

function drag(ele){
    $(document).mousemove(function(e){
        yPos = ele.offset();
        yPos = yPos.top;
        diff = (yPos + ele.height()) - e.pageY;
        ele.css('top', e.pageY - diff);
    }).mouseup(function(){
        $(this).unbind('mousemove');
    });
}

它工作得非常好，除了有时它会通过小的变化开始闪烁并且 diff 变量会跳来跳去。我不知道可能是什么原因造成的，也许其他人会这样做？

http://jsfiddle.net/GTGMN/2/

这个问题在 jsFiddle 中更为突出。

4

2 回答 2

1

这是因为您正在更改top元素的属性，同时您正在使用该信息来移动元素。试试这个例如：

function drag(ele){
    $(document).mousemove(function(e){
        ele.css('top', e.pageY);
    }).mouseup(function(){
        $(this).unbind('mousemove');
    });
}

$('.box').mousedown(function(){
    drag($(this));
})

此代码会将元素直接放在光标所在的位置。它可能不是您想要的，但尝试移动元素而不直接依赖其先前的位置。

更新：

该问题要求在点击开始的位置进行 1-1 运动。这个小提琴就是这样做的。这个想法是在拖动开始时计算从单击位置到框顶部的差异，然后使用该偏移量更新位置。

于 2013-07-25T16:27:44.537 回答
0

你的数学看起来很奇怪。diff变量的意义究竟是什么？

你不只是想要：？

ele.css('top', e.pageY);

或者

ele.css('top', e.pageY - ele.height() / 2);
于 2013-07-25T16:20:05.737 回答