在droppable元素上的jQuery UI Draggable(jQuery UI Draggable on droppable element)

 我一直试图通过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/ 

I have been trying to put a Draggable element on Droppable element, by jquery ui, and i almost succeded as the code working halfly, if you move a little the elements on the droppable, they are changing their place, and i don't want it to, i want they will stay where they are, but if you drag them outside of the droppable area, they will come back to their natural place.

 the code i've done:

 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/

原文：https://stackoverflow.com/questions/20774843