Question

我有droppable个空格，有两个draggable个元素。我有两个问题：

如果droppable区域中已有draggable项，如果我尝试将第二项放在最上面，我需要它refused并且恢复到原来的位置。
我可以毫无问题地使用revert: 'invalid'代码，但是如果我将draggable项放入droppable区域然后想要将其移回 - 它会保留恢复到droppable区域的位置，而不是原来的位置。

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

Answer 1

你可以做的是将你的可拖动物包裹在你div droppable的{{1}}中：

<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

jQuery draggable和droppable接受并恢复问题

1 个答案: