Question

我正在使用JQuery-ui draggable＆amp;可弃。我想将删除的元素添加到drop-target容器中，同时保留它在删除时的明显位置。使用.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/

非常欢迎有关调查可能性的建议！

Answer 1

解决绝对定位问题。将子元素附加到隐藏的，绝对定位的div“accept”，并手动将子元素位置更改为“absolute”：

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

JQuery的： 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 ) {
    $(".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 -->

拖拽，放置和放置的定位使用JQuery-Ui Droppable附加的项目

1 个答案: