jQuery UI:可拖动，不会恢复到原始位置 [英] JQuery UI: draggable not revert to original position

问题描述

css位置top都会增加大约10像素.例如，

css position top increase by approximately 10px every time the draggable is dropped OR reverts. For example,

第一次将苹果从.sidebox拖动到.dropbox时，苹果最终像这样:

First time I drag the apple from .sidebox to .dropbox, the apple ends up like this:

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

第二次，我将苹果从.dropbox拖回.sidebox或稍微移动使其恢复，苹果就是这样，注意top增加了10:

Second time, I drag apple from .dropbox back to .sidebox or just slight move it and let it revert, apple is like this, note top increased by 10:

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

重复拖放操作，top越来越大:

Repeat drag-and-drop, top gets bigger and bigger:

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

所以我亲爱的苹果正从正电子漂移，直到它在页面上说再见为止.是什么原因造成的?

So my dear apple is drifting away from positon I want it to be until it says byebye to the page. What causes this?

简化代码:

    // 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位置是固定的，可能会有所帮助吗?

Note that .sidebox position is fixed, might help?

推荐答案

revert : function(event , ui)
    {

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

一个令人困惑的问题，我猜您想返回到原始位置，无论如何，它将恢复到原始位置.添加

confusing question I am guessing you want to return to original position this will revert to original position regardless. add in the

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

这篇关于jQuery UI:可拖动，不会恢复到原始位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！