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:
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(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],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.
HTML5 drag and drop to move a div anywhere on the screen?
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 theclientX
andclientY
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.
Drag and drop anywhere on screen with multiple elements of the same ID Class and Tag HTML
The following code will allow drag and drop; I'm sorry it doesn't follow your previous coding style.
Here is a JSFiddle showing it in action: https://jsfiddle.net/6gq7u8Lc/
document.getElementById("dragme").onmousedown = function(e) {
this.prevX = e.clientX;
this.prevY = e.clientY;
this.mouseDown = true;
}
document.getElementById("dragme").onmousemove = function(e) {
if(this.mouseDown) {
this.style.left = (Number(this.style.left.substring(0, this.style.left.length-2)) + (e.clientX - this.prevX)) + "px";
this.style.top = (Number(this.style.top.substring(0, this.style.top.length-2)) + (e.clientY - this.prevY)) + "px";
}
this.prevX = e.clientX;
this.prevY = e.clientY;
}
document.getElementById("dragme").onmouseup = function() {
this.mouseDown = false;
}
On a side note, you won't be able to give them all the same id. The DOM doesn't support such a thing. If you want to add multiple elements of the same type, I would suggest a 'container' parent div, adding the elements as children of the div, and iterating through the .children attribute to access each.
drag and drop move in real time
If you want to solve this problem with less code, you can use jQuery Ui draggable();
function for realtime moving any element.
$( function() { $("#drag").draggable(); } );
#drag {width: 150px;height: 150px;padding: 10px; z-index:9;cursor: all-scroll;color:#fff;background-color: green;}
.other{width:90%;position:relative;padding: 10px;background-color: red;color:#fff;z-index: 0;margin-top:10px;}
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Draggable element</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head><body> <div id="drag" class="ui-widget-content"> Drag this div</div>
<div class="other"><h4>Other elements </h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </body></html>
Drag drop with handle
I have slightly modified SaphuA's answer to allow highlighting text.
The trick is not to add the draggable
attribute until the drag handle gets the mousedown
event.
Here's a demo: https://jsfiddle.net/a6tgy9so/1/
Related Topics
How to Check If Geolocation Has Been Declined with JavaScript
How to Add Drop-Down List (<Select>) Programmatically
Disable Dragging an Image from an HTML Page
How Does Facebook Rewrite the Source Url of a Page in the Browser Address Bar
How to Disable a Href Link in JavaScript
Vue.Js Get Selected Option on @Change
Run a Website in Fullscreen Mode
Run Change Event for Select Even When Same Option Is Reselected
How Send a Form with JavaScript When Input Name Is "Submit"
How Filereader.Readastext in HTML5 File API Works
Jquery - How to Select by Attribute
Alternation Operator Inside Square Brackets Does Not Work
Make HTML Text Input Field Grow as I Type