Question

我有一个动态网页，我使用Jquery＆＃34; draggable＆＃34; ＆安培; ＆＃34;可投放＆＃34 ;.
我试图从一个＆＃34;父母＆＃34;移动一个元素。另一个。

当我做＆＃34; console.log＆＃34;我可以看到元素有一个新的父元素但是当我稍后向DOM添加更多HTML内容时，该元素不会随着它的新父级移动。它坚持＆＃34;文件＆＃34;偏移位置。
我该如何解决这个问题？

FIDDLE
https://jsfiddle.net/0apuqnxd/13/

JS

      //Make elements Draggable
  $('.elementsDiv').draggable({
    revert: 'invalid',
  });
  var flakUpId = $('#1').attr('id');

  $('#btnAddDropZone').on('click', function() {
    flakUpId++;
    var flakUp = "<div class='flakUp'>DropZone " + flakUpId + " </div>";
    $('#dropZones').prepend(flakUp);
  })

  $('.flakUp, .flakDown').droppable({
    accept: '.elementsDiv',
    drop: function(event, ui) {
      var droppable = $(this);
      var draggable = ui.draggable;

      //Detach element from DOM
      draggable.detach();

      //Append element to droped position and into new parent?
      draggable.css({
        "left": ui.offset.left,
        "top": ui.offset.top,
        "position": "absolute"
      }).appendTo(droppable);
    },
  });

Answer 1

这个怎么样？

//Make elements Draggable
$('.elementsDiv').draggable({
  revert: 'invalid',
});
var flakUpId = $('#1').attr('id');

$('#btnAddDropZone').on('click', function() {
  flakUpId++;
  var flakUp = "<div class='flakUp'>DropZone " + flakUpId + " </div>";
  $('#dropZones').prepend(flakUp);

  registDroppable();

  $(".flakUp .elementsDiv").each(function(e) {
    $(this).css({"top": $(this).offset().top+$(".flakUp").height()});
  });
})

function registDroppable() {
    $('.flakUp, .flakDown').droppable({
    accept: '.elementsDiv',
    drop: function(event, ui) {
      var droppable = $(this);
      var draggable = ui.draggable;
      // Move draggable into droppable

      draggable.css({
        "left": ui.offset.left,
        "top": ui.offset.top,
        "position": "absolute"
      }).appendTo(droppable);
    },
  });
}
registDroppable();

https://jsfiddle.net/ChaHyukIm/0apuqnxd/15/

Answer 2

我刚改变了三件事似乎有效：

1）添加新Div时添加ID和类： a）id =“12” - 硬编码测试你可以稍后更改 b）class =“ui-droppable”添加

$('#btnAddDropZone').on('click', function() {
  flakUpId++;
  var flakUp = "<div id='12' class='flakUp ui-droppable '>DropZone " + flakUpId + " </div>";
  $('#dropZones').prepend(flakUp);
})

2）。我给了不同的ID = 100而不是1。因为我看到另一个id =“1”的div

<div id="dropZones">
  <div class='flakUp' id="100">DropZone 1</div>
</div>

完整代码：

<强> HTML

<div class="row well">
  <button class="btn btn-primary" id="btnAddDropZone">Add dropZone</button>
</div>
<div id="dropZones">
  <div class='flakUp' id="100">DropZone 1</div>
</div>
<hr>
<div class="elementsDiv" id="1" style="width: 200px; height: 25px; background-color: #c2c2d6; cursor: move">Drag me 1</div>
<div class="elementsDiv" id="2" style="width: 150px; height: 35px; background-color: #c2c2d6; cursor: move">Drag me 2</div>
<div class="elementsDiv" id="3" style="width: 160px; height: 35px; background-color: #c2c2d6; cursor: move">Drag me 3</div>

<强>脚本

//Make elements Draggable
$('.elementsDiv').draggable({
  revert: 'invalid',
});
var flakUpId = $('#1').attr('id');

$('#btnAddDropZone').on('click', function() {
  flakUpId++;
  var flakUp = "<div id='12' class='flakUp ui-droppable'>DropZone " + flakUpId + " </div>";
  $('#dropZones').prepend(flakUp);
})

$('.flakUp, .flakDown').droppable({
  accept: '.elementsDiv',
  drop: function(event, ui) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // Move draggable into droppable
    var offset = $(this).offset();
    var relX = event.pageX - offset.left;
    var relY = event.pageY - offset.top;

    draggable.css({
      "left": ui.offset.left,
      "top": ui.offset.top,
      "position": "absolute"
    }).appendTo(droppable);
  },
});

Jquery`delach（）`和`追加`给新的父级

2 个答案: