I am trying to achieve the drag and drop feature something like this:
I am using jQuery to achieve this. Every time I drop a rectangular then it will create a new copy of the rectangular with new id and class. Also, I will attach a drop-down menu to it. I am able to do those things But I am facing a few problems after dropping the element:
onDrop
the element always gets placed one after the other at the beginning of thedroppable
div. It does not get dropped on exactly the place where I released the mouse.The newly created rectangular is not freely draggable within the droppable div. Can someone please help me with this issue.
Also, I am unsure how to use the line to attach these rectangular. I need to create a line which will connect all these rectangles based on the user needs.
HTML CODE:
<div class="draggable" id="RootBox" style="width:200px;height:50px;border:1px solid #000;" draggable="true"></div>
jQuery Code:
$('#DroppableCanvas').on('drop',function(event){
event.preventDefault();
var data = event.originalEvent.dataTransfer.getData("text/html");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.setAttribute("id", 'box'+NewBoxId);
nodeCopy.classList.add('draggable');
nodeCopy.setAttribute("draggable",true);
var SelectID = 'select'+NewBoxId;
var combo = $("<select></select>").attr("id", SelectID).attr("name", SelectID);
$.each(BusinessStep, function (i, el) {
combo.append("<option>" + el.text + "</option>");
});
$(nodeCopy).append(combo);
$nodeCopy.draggable({
revert: "invalid",
scope: "items"
});
event.target.appendChild(nodeCopy);
NewBoxId++;
});