1

我正在使用 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/

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

4

1 回答 1

2

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

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

jQuery: var $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 -->
于 2013-05-17T11:05:17.787 回答