jQuery的可拖動和投擲的接受和回覆問題

示例代碼在這裏：http://jsfiddle.net/pDuxe/jQuery的可拖動和投擲的接受和回覆問題

我有兩個draggable元素droppable空間。我有兩個問題：

如果droppable區中已經有一個draggable項目，如果我再嘗試，並在上面拖放第二個項目，我需要它refused並恢復到原來的位置。
我可以利用revert: 'invalid'代碼沒有問題的，但如果我把一個draggable項目成droppable區域，然後想將它移回 - 它一直在droppable面積恢復到它的地方，而不是它的原位置。

那麼，我該如何去實現這兩種情況呢？

2012-12-06 Homer_J

對不起，這個答案是失敗的：D 檢查這張票：http://stackoverflow.com/questions/3088485/how-to-revert-position-of-a-jquery-ui-draggable-based-on - 條件 –

謝謝邁克爾，我已經看到了這張票，但一直在努力實現，在我的情況下 - 因此提出這個問題。 –

你可以做的是包裝您的拖拽元素在div，你還讓droppable：

<div id="originalposition"> 
    <div id="draggable" class="ui-widget-content"> 
     <p>Drag me to my target</p> 
    </div> 

    <div id="draggable2" class="ui-widget-content"> 
     <p>Drag me to my target</p> 
    </div> 
</div>

然後，你可以這樣做以下：

$(function() { 
    $("#draggable").draggable({ revert: 'invalid' }); 
    $("#draggable2").draggable({ revert: 'invalid' }); 
    $("#originalposition").droppable({ 
     drop: function(event,ui) { 
       $("#droppable").removeClass("ui-state-highlight").addClass("ui-widget-header").html("<p>Drop here</p>"); 
       } 
    }); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
       $(this).addClass("ui-state-highlight").find("p").html("Dropped!"); 
       }, 
     accept: function(dropElem) { 
       //dropElem was the dropped element, return true or false to accept/refuse it 
       return (!$(this).hasClass("ui-state-highlight") && $(dropElem).hasClass("ui-widget-content")); 
       } 
    }); 
});

Fiddle here。

來源

2012-12-06 20:16:48 mccannf

這正是我正在尋找 - 真的很感激反饋和答案！ –

jQuery的可拖動和投擲的接受和回覆問題

回答

相關問題