拖放，定位的位置使用JQuery-Ui Droppable附加项目 [英] Positioning of dragged, dropped & appended items using JQuery-Ui Droppable

问题描述

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

I am using JQuery-ui draggable & droppable. I want to add dropped elements to the drop-target container, while preserving the apparent position that it had when it was dropped. Using .html() lets me preserve the position data added by the .draggable() function, but because they become children of a new element, they snap to a new position relative to that element. I experimented with helper:clone, but found that it removed all positioning information.

这是我的代码，该代码将放置的项目添加到放置目标，并在每次放置前一个对象时生成一个新的拖动项目.它的工作原理是，所放置的元素的位置不正确-放置时应保持其所在的视觉位置.

Here is my code, which adds dropped items to the drop target and generates a new drag item each time the previous one was dropped. It works, except that the positioning of the dropped elements is wrong- they should keep the visual position they were in when dropped.

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:

Here it is as a JSFiddle:

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

我们强烈欢迎您提出调查可能性的建议！

Suggestions for possibilities to investigate will be highly welcome!

推荐答案

解决了绝对定位问题.将子元素附加到一个隐藏的，绝对定位的div接受"，然后手动将子元素的位置更改为绝对":

Solved with absolute positioning. Appending the child elements to a hidden, absolutely positioned div "accept", and manually changing child element position to "absolute":

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

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

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附加项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！