3

top每次拖放或还原可拖动对象时，css 位置都会增加大约 10 像素。例如，

我第一次将苹果从 .sidebox 拖到 .dropbox 时，苹果最终是这样的：

<div class="apple ui-draggable selected" style="position: relative; left: 0px; top: 10.1px;"></div>

第二次，我将苹果从 .dropbox 拖回 .sidebox 或者只是稍微移动它并让它恢复，苹果是这样的，注意top增加 10：

<div class="apple ui-draggable selected" style="position: relative; left: 0px; top: 20.1px;"></div>

重复拖放，top变得越来越大：

<div class="apple ui-draggable selected" style="position: relative; left: 0px; top: 30.1px;"></div>
...

所以我亲爱的苹果正在远离我希望它保持的位置，直到它对页面说再见。这是什么原因造成的？

简化代码：

    // drag and drop
    $( ".apple" ).draggable({ 
        revert:true
    });

    $( ".dropbox" ).droppable({
        drop: handleDropbox
    });

    $( ".sidebox" ).droppable({
        drop: handleSidebox
    });

    function handleDropbox(event, ui) {
        $(this).append(ui.draggable);
        $(this).droppable( 'disable' );
    }

    function handleSidebox(event, ui) {
       ui.draggable.parent().droppable('option', {'disabled':false});
       $(this).children('h4').after(ui.draggable); 
    }

编辑：无法在 jsfiddle 中复制它，不知道为什么..

请注意，.sidebox位置是固定的，可能有帮助吗？

4

3 回答 3

0

请检查小提琴

http://jsfiddle.net/4gFqh/7/

$( ".apple" ).draggable({ 
    revert:function(event,ui){  
        s=s+10;
        alert("my top position is "+s);
        $(this).data("draggable").originalPosition = {
                          top:s,
                          left:0
                                         };
                    return !event;
                             },
});
于 2013-05-31T12:03:11.357 回答
0

我在使用 JQuery 时遇到了完全相同的问题。每当我的项目恢复时，它就会慢慢地滑下页面。如果我多次拖动和释放，该元素最终会“恢复”到屏幕之外。我的解决方案是记录起始位置并在之后重置 css 属性。我的代码在我的真实项目中很长，所以我将展示一个示例（在遇到这个 8 年前的主题后，我发现最快的修复方法。）顺便说一句 - 如另一个答案所示的真正还原并不总是将可拖动的返回到相同的位置（否则我不会有问题） - 我想这可能是因为边界？老实说，我不知道。

$("myElement").draggable({
    start: function(event, ui){ startPos = $(this).position();},
    stop: function(event, ui){
        $(this).css("top", startPos.top);
        $(this).css("left", startPos.left);
    }
});

我希望这对某人有所帮助......只知道它对我有用:)

于 2021-09-01T13:38:31.963 回答
0 
revert : function(event , ui)
    {

      if(event){
        return event;
      }
      else
        return !event;
    }

令人困惑的问题我猜你想回到原来的位置，无论如何这都会恢复到原来的位置。加入

 $("element").draggable(function({
// add revert here 
});
于 2019-12-11T06:13:15.710 回答