Need help. Drag and drop.

Hi guys. Just made a checkers game with divs. The pieces are divs that i added css to make the circlular. When i added "draggble = true" and started to drag it the screen shows me that i am dragging a block with a circle in it insted of a circle by its self.

html css drag-drop js

6th Apr 2020, 4:58 PM

jacob lipsky

3 Answers

+ 1

Use this : <style> #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } .dot { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) {debugger; ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <span id="drag1" class="dot" draggable="true" ondragstart="drag(event)" width="336" height="69"></span> </body> i hope this will help you.

8th Apr 2020, 6:51 AM

Shaili Shah