HTML5 Drag and Drop anywhere on the screen?

Drag and drop doesn't move elements around, if you want the element to move when you drop it then you have to set the new position of the element in the drop event. I've done an example which works in Firefox and Chrome, here are the key points.

Drag and drop doesn't move elements around, if you want the element to move when you drop it then you have to set the new position of the element in the drop event. I've done an example which works in Firefox and Chrome, here are the key points: function drag_start(event) { var style = window. GetComputedStyle(event.

Target, null); event.dataTransfer. SetData("text/plain", (parseInt(style. GetPropertyValue("left"),10) - event.

ClientX) + ',' + (parseInt(style. GetPropertyValue("top"),10) - event. ClientY)); } The dragstart event works out the offset of the mouse pointer from the left and top of the element and passes it in the dataTransfer.

I'm not worrying about passing the ID because there's only one draggable element on the page - no links or images - if you have any of that stuff on your page then you'll have to do a little more work here. Function drop(event) { var offset = event.dataTransfer. GetData("text/plain").

Split(','); var dm = document. GetElementById('dragme'); dm.style. Left = (event.

ClientX + parseInt(offset0,10)) + 'px'; dm.style. Top = (event. ClientY + parseInt(offset1,10)) + 'px'; event.preventDefault(); return false; } The drop event unpacks the offsets and uses them to position the element relative to the mouse pointer.

The dragover event just needs to preventDefault when anything is dragged over. Again, if there is anything else draggable on the page you might need to do something more complex here: function drag_over(event) { event.preventDefault(); return false; } So bind it to the document. Body along with the drop event to capture everything: var dm = document.

GetElementById('dragme'); dm. AddEventListener('dragstart',drag_start,false); document.body. AddEventListener('dragover',drag_over,false); document.body.

AddEventListener('drop',drop,false); If you want this to work in IE you'll need to convert the aside to an a element, and, of course, all the event binding code will be different. The drag and drop API doesn't work in Opera, or on any mobile browsers as far as I'm aware. Also, I know you said you don't want to use jQuery, but cross browser event binding and manipulating element positions are the sort of things that jQuery makes much easier.

I wish I could promote this answer more - this was exactly what I was looking for. Thank you. – clicheName Jun 5 at 3:02.

It's quite straightforward really: In the dragstart event calculate the offset between where the user clicked on the draggable element and the top left corner Make sure the dragover event is applied to the entire document so the element can be dropped anywhere In the drop event, use the offset you calculated with the clientX and clientY of the drop to work out where to position the element Here's one I prepared earlier. For bonus points you can update the top and left position of the element in the dragover event, this is useful if the bit you're allowing to be dragged isn't the whole element that needs to be moved.

If you want to do the drag-n-drop yourself, you may want to have one div enclosing the draggable div, so you can use the top of the larger div as the draggable area.

If you want to do the drag-n-drop yourself, you may want to have one div enclosing the draggable div, so you can use the top of the larger div as the draggable area. So, you have ... This code is purely for example, won't work, btw. So, on the draggablediv you would put an onclick event handler, and this would start an onmousemove handler and onmouseup handler.

The last one is to drop, but you may also want to have onblur in case the mouse moves outside of the browser. Then, as the mouse moves, just reposition the div, so these divs would need to be absolute positioned, or relative positioned (absolute would be easier). It is important to remove the event handlers by setting them to null when the mouse button is released.

If not in a droppable area then make certain to put the div back where it started, so you will want a closure so you can remember the original top/left coordinates of the div. You will want to get familiar with this functionality: (function g(someval) { var a = someval; return h() { } })(origval); For an example search for getImgInPositionedDivHtml in jibbering.com/faq/notes/closures/ In order to change the z-index you may want to have a +/- in the div and when that is clicked on the z-index is changed. Here is a page that talks about changing the z-index.

msdn.microsoft.com/en-us/library/ms53300...).aspx.

I don't think you can do that with HTML-Only, however this is some example of how you could do it with javascript: Drag me around :D.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.