使用jQuery的用户界面可投放的定位拖累，下降及附加项目(Positioning of dragg

我使用jQuery的用户界面可拖动和投掷的。我想补充下降的元素落目标容器，同时保留了明显的立场，即当它被丢弃了。使用的.html（）让我保留通过.draggable（）函数添加的位置数据，而是因为他们成为了新元素的孩子，他们捕捉到相对于该元素的新位置。我尝试了帮手：克隆，但发现它删除了所有定位信息。

这里是我的代码，这增加了掉落的物品的放置目标，并生成一个新的拖累项目每前一个被丢弃的时间。它的工作原理，但被丢弃的元素的定位是错 - 他们应该保留他们跌落时，在视觉位置。

var $foo = 1;
var bar = "drag-" + $foo;

$(".origin div").addClass(bar);

$( ".origin div" ).draggable({
  containment: ".modal"
});

$( ".droppable" ).droppable({
  accept: ".origin div",
  drop: function( event, ui ) {
    $(".droppable").append($('.origin').html());
    succeed();
  }
});


  function succeed() {
      $foo++;
      var bar = "drag-" + $foo;

      $('.origin').html("<div class='draggable'>Drag <span class='drag-num'></span></div>" );
      $(".origin div").addClass(bar);
      $( ".origin div" ).draggable({
          containment: ".modal"
      });
  }

加价：

     <div class="origin">
         <div class="draggable">Drag <span class="drag-num"></span></div>
     </div>

    <div class="droppable">
       <p>accept: '#draggable'</p>
    </div>

这是作为一个的jsfiddle：

http://jsfiddle.net/jrX2M/1/

为准备进行调查的建议将是非常欢迎！

解决了绝对定位。追加的子元素隐藏，绝对定位的div“接受”，并手动更改子元素的位置“绝对”：

http://jsfiddle.net/jrX2M/3/

JQuery的：VAR $ FOO = 1; VAR栏= “拖拽” + $ foo的;

$(".origin div").addClass(bar);

$( ".origin div" ).draggable({
  containment: ".modal"
});

$( ".droppable" ).droppable({
  accept: ".origin div",
  drop: function( event, ui ) {
    $(".accept").append($('.origin').html());
    $(".accept div").css("position", "absolute");
    succeed();
  }
});


  function succeed() {
      $foo++;
      var bar = "drag-" + $foo;

      $('.origin').html("<div class='draggable'>Drag <span class='drag-num'></span></div>" );
      $(".origin div").addClass(bar);
      $( ".origin div" ).draggable({
          containment: ".modal"
      });
  }

加价：

<div class="modal">
    <div class="accept">
    </div>
    <div class="origin">
      <div class="draggable">Drag <span class="drag-num"></span></div>
    </div>

  <div class="droppable">
       <p>accept: '#draggable'</p>
   </div> <!-- end droppable -->
</div> <!-- end modal -->