I need to place a div on top of the table so that it can be moved relative to the cells of this table.

Here is an example , tell me how to get a similar effect, about what (and where) to read?

  • read jquery ui draggable and droppable - Jean-Claude
  • I would study the code of the provided example, and then it would be possible to achieve not only a similar effect. - Vyacheslav Danshin

1 answer 1

Read, for example, about HTML5 Drag and Drop ,

Here is a living example ...

function allowDrop(ev) { ev.preventDefault() }; function drag(ev) { ev.dataTransfer.setData("text", ev.target.id) }; function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }; 
 <style>#placeToDrag {width: 120px;height: 30px;padding: 10px;border: 1px solid #aaaaaa;}</style> <body> <div id="placeToDrag" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="itemToDrag" draggable="true" ondragstart="drag(event)">Перетащи меня</div> </body>