Question

我一直试图通过jquery ui将一个Draggable元素放在Droppable元素上，当代码工作一半时，我几乎成功了，如果你移动一点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 draggable on drop event就可以了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!" );
      }
    });
  });

在droppable元素上的jQuery UI Draggable

2 个答案: