Drag and drop:
Draggable= on the "true" page to enable drag-and-drop
Event:
Ondragstart drag-and-drop start Event
Ondrag drag and drop in
Ondragend drag-and-drop End Event
Drop Zone Event:
OnDragEnter into the delivery area
OnDragOver Drop Zone move
OnDragLeave leave the delivery area
OnDrop Delivery Area
Example text:
<meta charset= "UTF-8" >
<title></title>
<style>
#dropBlock {
width:300px;
height:300px;
Position:absolute;
left:0;
top:0;
Background:black;
}
#moveBlock {
width:100px;
height:100px;
Position:absolute;
background:red;
left:0;
top:300px;
}
</style>
<body>
<div id= "Dropblock" ></div>
<div id= "Moveblock" draggable= "true" ></div>
</body>
<script src= "Js/drag.js" ></script>
<script>
(function () {
var dropblock = document.getElementById ("Dropblock");
var moveblock = document.getElementById ("Moveblock");
var moveblockinispos = getdimensions (Moveblock);
var startPoint;
var Moveblockpos;
Moveblock.ondragstart = function () {
var e = Geteventobject (e);
Get the coordinates of the mouse click
StartPoint = Getpointerpositionindocument (e)
Get the position of the moved block
Moveblockpos = Getdimensions (Moveblock);
}
Moveblock.ondrag = function () {
Console.log ("Drag and Drop");
// }
Moveblock.ondragend = function () {
Console.log ("drag End");
// }
Dropblock.ondragenter = function () {
Console.log ("Enter the area");
// }
Dropblock.ondragover = function (e) {
Console.log ("Move the area");
Prevent default events from occurring
E.preventdefault ();
}
Dropblock.ondragleave = function () {
Console.log ("Leave the area");
// };
Dropblock.ondrop = function () {
var e = Geteventobject (e);
var newpoint = getpointerpositionindocument (e);
var distance = getpointerdistance (startpoint,newpoint);
MoveBlock.style.left = (Moveblockpos.left + distance.x) + "px";
MoveBlock.style.top = (moveblockpos.top + distance.y) + "px";
}
Dropblock.ondragleave = function () {
Console.log ("Leave the area");
var e=geteventobject (e);
MoveBlock.style.left = moveblockinispos.left + "px";
MoveBlock.style.top = moveblockinispos.top + "px";
};
}())
</script>
Drag-and-drop of objects in HTML5