jQuery UI Draggable on droppable element

Question

我一直在尝试通过 jquery ui 在 Droppable 元素上放置一个 Draggable 元素，并且我几乎成功了，因为代码工作了一半，如果你在 droppable 上移动一点元素，它们正在改变它们的位置，我不不想要它，我希望它们会留在原处，但是如果您将它们拖到可放置区域之外，它们会回到它们的自然位置。

我完成的代码：

HTML：

<div class="cart">
<div class="products on">1</div>
<div class="products on">2</div>
</div>

<div class="products">3</div>
<div class="products">4</div>
<div class="new"></div>

jquery：

 $(function() {
  $(".products").draggable({
  appendTo: "body",
  revert : function(event, ui) {
  if($(this).attr("class").split(' ')[1] == 'on') {
  $(".new").append($(this)); $(this).removeClass("on"); return !event; 
  }else{
  $(this).data("uiDraggable").originalPosition = {top : 0,left : 0}; return !event; 
  } },
  start: function(event, ui) { ui.helper.data('dropped', false); },
  stop: function(event, ui) {
  if(!ui.helper.data('dropped')) {
  $("#"+$(this).html()).remove();
  } 
  }
  });

$(".cart").droppable({
  drop: function( event, ui ) {
    var text = ui.draggable.html();
    $(".cart").append('<div id="'+text+'">'+text+'</div>');
    ui.draggable.data('dropped', true);
  }
});

   });

http://jsfiddle.net/yreKf/8/

Answer 1

只需在 drop 事件上删除可拖动的销毁即可jsfiddle

drop: function( event, ui ) {
    var text = ui.draggable.html();
    $(".cart").append('<div id="'+text+'">'+text+'</div>');
    ui.draggable.data('dropped', true);
     $(ui.draggable).draggable({
              revert: "invalid"
          });
  }

Answer 2

这可能就是你要找的答案

http://jqueryui.com/droppable/#revert

$(function() {
    $( "#draggable" ).draggable({ revert: "valid" });
    $( "#draggable2" ).draggable({ revert: "invalid" });

    $( "#droppable" ).droppable({
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-active",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });