0

I am trying to achieve the drag and drop feature something like this:

enter image description here

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:

  1. onDrop the element always gets placed one after the other at the beginning of the droppable div. It does not get dropped on exactly the place where I released the mouse.

  2. The newly created rectangular is not freely draggable within the droppable div. Can someone please help me with this issue.

  3. 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++;
    });
BATMAN_2008
  • 2,788
  • 3
  • 31
  • 98
  • I do not have time to generate a detailed answer, but if my understanding is correct, once dropped, nodeCopy becomes just another child of #DroppableCanvas, and from that point the location of the children within #DroppableCanvas is controlled by CSS. You have not included any CSS so not sure if you are using any. I think you will need to control the x- y- positions of the object. Have a look at https://stackoverflow.com/questions/21605942/drag-element-on-canvas – Nikkorian Jul 19 '20 at 13:35
  • @Nikkorian Thanks a lot for the response. Yes, you are correct I am not using any CSS at the moment but as per my knowledge, we do not need to use the CSS. By default, it places the elements in the position where we have dropped using the mouse cursor. Doesn't it? need confirmation. Also, I am not using the `HTML CANVAS` to achieve this. As provided in the code above I am just using a simple `div` to drop the elements. Will that make any difference? – BATMAN_2008 Jul 19 '20 at 13:46
  • No the *default* position (static) of a DIV within another div, without any positioning on your part, is on the left, under the previous child. "An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page" (https://www.w3schools.com/css/css_positioning.asp). I think you will need to use absolute positioning to leave it out in the middle of its parent. – Nikkorian Jul 19 '20 at 13:51
  • or relative positioning – Nikkorian Jul 19 '20 at 13:55

0 Answers0