JQuery UI: 可拖动的元素不能返回原始位置

Question

css的position属性中，top每次拖放结束或回归时会增加大约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 的位置是固定的, 这可能会有所帮助?

- Philip007

---

你能为此创建一个 jsfiddle 吗？ - Jithin

Answer 1

revert : function(event , ui)
    {

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

令人困惑的问题，我猜你想要返回到原始位置，这将无论如何恢复到原始位置。加入

 $("element").draggable(function({
// add revert here 
});

- 이재찬

Answer 2

我在使用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);
    }
});

希望这可以帮助到某人...知道它对我起了作用 :)

- Phil Hahl

Answer 3

请检查这个 fiddle。

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

- Arunkumar

---

你完全误解了这个问题。也许我没有表述清楚，请看编辑。 - Philip007