Draggable element only drags the first time in JS

Question

I'm having troubles on figuring out what is wrong with this code : I have a <button> inside a <table> that contains an <img> , I want that button to be dragged multiple times.

The functions written in this code make the first drag to work but if I try to drag the element to another cell a second/multiple times, instead of getting his id and move the element, it returns the absolute path of the image and it does not move. The function drag(ev) sets the event target data to his id, then drop(ev) gets the data set before with dataTransfer.getData() and appends it to the current target with ev.target.appendChild(document.getElementById(data))

As you can see I can drag a button in the third <td> but I cannot change the position of the button again because it can only be dragged one time.

var td1 = document.getElementById("1");
        td1.setAttribute("ondragover", "enableDrop(event)");
        td1.setAttribute("ondrop", "drop(event)");
        var td2 = document.getElementById("2");
        td2.setAttribute("ondragover", "enableDrop(event)");
        td2.setAttribute("ondrop", "drop(event)");
        var td3 = document.getElementById("3");
        td3.setAttribute("ondragover", "enableDrop(event)");
        td3.setAttribute("ondrop", "drop(event)");

        var btn1=document.getElementById("button-0");
        btn1.draggable = true;
        btn1.setAttribute("ondragstart", "drag(event)");
        var btn2=document.getElementById("button-1");
        btn2.draggable = true;
        btn2.setAttribute("ondragstart", "drag(event)");

        function enableDrop(ev) {
          ev.preventDefault();
        }

        function drag(ev) {
          ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
          // ev.preventDefault();
          var data = ev.dataTransfer.getData("text");
          console.log(data);
          ev.target.appendChild(document.getElementById(data));
        }

 <!DOCTYPE html>
        <html>
          <body>
          <table>
            <tbody>
              <tr>
                <td id="1">
                  <button id="button-0">
                    BUTTON1
                  </button>
                </td>
              </tr>
                  <tr>
                <td id="3">        
                   DRAG BUTTON HERE
                </td>
              </tr>
               <tr>
                <td id="2">
                  <button id="button-1">
                    BUTTON2
                  </button>
                </td>
              </tr>
              </tbody>
          </table>
          </body>
        </html>

@NehaSoni the elements of the HTML are created dinamically with JavaScript, it's an 8x8 table it's too long a code to write — Lvcaa, Mar 18 '23 at 11:08

score 1 · Accepted Answer · answered Mar 18 '23 at 11:33

Although the drag handler is defined on the button element, the drag event target will be the img. There's more on event propagation here

You can hop up the element hierarchy yourself to find the button element you're expecting, e.g.:

function drag(ev) {
  let elt = ev.target;
  while (elt && !elt.hasAttribute("draggable"))
    elt = elt.parentElement;
    
  if (elt)
    ev.dataTransfer.setData("text", elt.id);
}

Draggable element only drags the first time in JS

1 Answers1