使用 JQuery-Ui Droppable 定位拖放和附加的项目答案

【问题标题】：Positioning of dragged, dropped & appended items using JQuery-Ui Droppable使用 JQuery-Ui Droppable 定位拖放和附加的项目
【发布时间】：2013-05-17 10:53:37
【问题描述】：

我正在使用可拖放的 JQuery-ui。我想将放置的元素添加到放置目标容器，同时保留它被放置时的明显位置。使用 .html() 可以让我保留 .draggable() 函数添加的位置数据，但是因为它们成为新元素的子元素，它们会捕捉到相对于该元素的新位置。我尝试了 helper:clone，但发现它删除了所有定位信息。

这是我的代码，它将拖放的项目添加到放置目标，并在每次放置前一个项目时生成一个新的拖动项目。它可以工作，除了被放置元素的位置是错误的——它们应该保持它们在被放置时所处的视觉位置。

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/

非常欢迎提出调查可能性的建议！

【问题讨论】：

标签： jquery jquery-ui draggable jquery-ui-droppable

【解决方案1】：

用绝对定位解决。将子元素附加到隐藏的、绝对定位的 div“接受”，并手动将子元素位置更改为“绝对”：

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

JQuery: 变量 $foo = 1; var bar = "拖动-" + $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 -->

【讨论】：