jQuery 可拖动和可放置接受和恢复问题答案

【问题标题】：jQuery draggable and droppable accept and revert issuesjQuery 可拖动和可放置接受和恢复问题
【发布时间】：2012-12-06 12:22:22
【问题描述】：

此处的示例代码：http://jsfiddle.net/pDuxe/

我有一个带有两个 draggable 元素的 droppable 空间。我有两个问题：

我可以毫无问题地使用revert: 'invalid' 代码，但是如果我将draggable 项目放入droppable 区域然后想要将其移回 - 它会不断恢复到它的位置droppable 区域而不是其原始位置。

那么，我将如何实现这两种情况呢？

【问题讨论】：

抱歉，这个答案失败了 :D 检查这张票：stackoverflow.com/questions/3088485/…
谢谢迈克尔，我已经看到了那张票，但在我的场景中很难实现它——因此提出了这个问题。

标签： jquery jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

您可以做的是将您的可拖动对象包装在一个 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.

【讨论】：

这正是我想要的——非常感谢您的反馈和回答！