Jquery `detach()` And `append` To New Parent

I have a dynamic webpage where i use Jquery 'draggable' & 'droppable'. I'm trying to move one element from one 'parent' to another. When i do 'console.log' i can see that the e

Solution 1:

How about this?

//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/

Solution 2:

I just changed three things and it seems working:

1) added ID and class when you add new Div: a)id="12" - Hardcoded to Test you can change later b) class="ui-droppable" added

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

2). I gave different ID=100 instead of 1. Because i saw another div with id="1"

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

Full Code:

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>

Script

//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);
  },
});