0

I need to drag one element and while dropping it should append a new html div container and appended html div container should be droppable (nested). I have attached fiddle file here. Can any one help on this?

$('.dragItem').draggable({
  helper: 'clone',
  connectToSortable: "#column2,#column2 div"
});

$('.dragItem').sortable({
  containment: "parent"
});

$('#column2').sortable({
  placeholder: "highlight"
});

$('#column2').droppable({
  accept: '.dragItem',
  drop: function(event, ui) {
    var draggable = ui.draggable;

    var droppable = $(this);
    var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
    drag.appendTo(column2); 
    drag.sortable({
      placeholder: "highlight"
    });
    drag.droppable({
      accept: ".dragItem",
      drop: function (event, ui) {
        var draggable = ui.draggable;
        var droppable = $(this);
        var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
      }
    })
    drag.css({width:'', height: ''})
  }
});`

Js Fiddle

bkausbk
  • 2,740
  • 1
  • 36
  • 52
Pushparaj
  • 1,072
  • 8
  • 29
  • I am concerned with 2 elements both having sortable and droppable. I believe this would create a conflict. Are you attempting to create a nested droppable div where it's parent can be sorted? – Twisty Mar 20 '17 at 18:28
  • I looked at your fiddle, and I can drag and drop into either. I can also drag and drop into the nested items, repeatedly. So I am not sure what is not working. – Twisty Mar 20 '17 at 18:29
  • Yeah nested is working but i need to append html template(divs with styles) while dropping and make that dropped divs as droppable. – Pushparaj Mar 21 '17 at 05:27
  • While dropping new div containers should append and need to make that dropped new container as droppable (nested).Appending new html while dropping and making that as droppable is the problem . – Pushparaj Mar 21 '17 at 05:31
  • Ok what html needs to appended? – Twisty Mar 21 '17 at 05:33
  • Nested drop is done.while dropping drop two box(box1,box2)one below other and second box(box2) should be nested droppable.I have to append only two boxes and second box as droppable.Thanks in advance – Pushparaj Apr 06 '17 at 06:05
  • $template=$("
    box1
    box2
    "); want to append this template while dropping     – Pushparaj Apr 07 '17 at 07:47

0 Answers0