How to drag and drop a JPanel to another JPanel?

How can I implement a javascript drag and drop without any drop area ?

• I've seen a lot of HTML5+JS drag and drop examples but there was always a drop area. I juste want to slide my element anywhere out of its place and delete it when it's dropped. This is a very simple example of drag and drop but I can't do it without the drop area: <script type="text/javascript" charset="utf-8"> function drag(target, e) { e.dataTransfer.setData('Text', http://target.id); } function drop(target, e) { var id = e.dataTransfer.getData('Text'); target.appendChild(document.getElementById(id)); e.preventDefault(); } </script> <div draggable="true" id="draggable" ondragstart="drag(this, event)">Drag me</div> <div id="droparea" style="background-color: #000000; height:100px; width:100px;" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"/> Does anybody has an idea?

• Answer:

  Essentially, you need to make a big drop area the size of your entire page.  This can be done with a large DIV tag, or you could look into whether the BODY element can receive drop events or not. Now admittedly I have not worked with the HTML5 Drag and Drop stuff but you could do something like this: The real problem is your usage of the appendChild method, which on a drop event will merely append the element you are dragging into the droparea as the last element. I suspect what you are really trying to do is to have a big space where you can position things any way you want just by merely dragging them about.  This then might be more appropriate to what you want. <div id="droparea" draggable="false" style="position: absolute; z-index: 100; left: 0px; right: 0px; top: 0px; bottom: 0px;" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"> <div draggable="true" id="draggable1" ondragstart="drag(this,event)" style="z-index: 200; width: 200px; height: 20px; border: 2px solid red; background: none repeat scroll 0% 0% green; font-weight: bold; margin: 10px;">Drag me 1</div> <div draggable="true" id="draggable2" ondragstart="drag(this,event)" style="z-index: 200; width: 200px; height: 20px; border: 2px solid red; background: none repeat scroll 0% 0% green; font-weight: bold; margin: 10px;">Drag me 2</div> <div draggable="true" id="draggable3" ondragstart="drag(this,event)" style="z-index: 200; width: 200px; height: 20px; border: 2px solid red; background: none repeat scroll 0% 0% green; font-weight: bold; margin: 10px;">Drag me 3</div> </div> <script charset="utf-8" type="text/javascript"> var offsetx = null, offsety = null; function drag(target, event) { if (!target.draggable) return; offsetx = target.offsetLeft-event.clientX; offsety = target.offsetTop-event.clientY; event.dataTransfer.setData('Text',target.id); } function drop(target, event) { var id = event.dataTransfer.getData('Text'); if (!id) return; var e = document.getElementById(id); e.style.position = "absolute"; e.style.left = (event.clientX+offsetx)+"px"; e.style.top = (event.clientY+offsety)+"px"; event.preventDefault(); } </script> The solution is to use absolute positioning instead of letting the div element manage positioning.