JavaScript achieves simple drag effects
- 2021-07-01 06:31:33
- OfStack
Drag is a very cool thing. You click on an object, hold down the mouse, move the mouse to another area, and then release the mouse button to put the object here.
Here is a simple case:
HTML section: Note that drag element 1 must be absolutely defined, that is, position = absolute;
<div style="position:absolute;height:100px;width:100px;background:red" class="draggable"></div>
<script src="dome.js"></script>
JS section (dome. js):
var EventUtil = {
// Get events and targets
getEvent : function (event) {
return event ? event : window.event;
},
getTarget : function (event) {
return event.target || event.srcElement;
},
// Add Listening Events
addEvent : function (element, type, handler) {
if (element.addEventListener)
{
element.addEventListener(type, handler, false);
} else if (element.attachEvent)
{
element.attachEvent("on" + type, handler);
}
},
// Log off listening events
delEvent : function (element, type, handler) {
if (element.removeEventListener)
{
element.removeEventListener(type, handler, false);
} else if (element.detachEvent)
{
element.detachEvent("on" + type, handler);
}
}
}
var DragDrop = function () {
// Judge DOM Flag of whether the element is being dragged
var dragging = null;
// DOM The difference between the upper left corner of the element and the mouse pointer
diffX = 0;
diffY = 0;
function handleEvent(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch (event.type) {
case "mousedown" :
// Judge DOM Element's class Does it contain in draggable Attribute
if (target.className.indexOf("draggable") > -1) {
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
}
break;
case "mousemove" :
if (dragging != null) {
target.style.left = event.clientX - diffX + "px";
target.style.top = event.clientY - diffY + "px";
}
break;
case "mouseup" :
dragging = null;
break;
}
}
return {
enable : function () {
EventUtil.addEvent(document, "mousedown", handleEvent);
EventUtil.addEvent(document, "mousemove", handleEvent);
EventUtil.addEvent(document, "mouseup", handleEvent);
},
disable : function () {
EventUtil.delEvent(document, "mousedown", handleEvent);
EventUtil.delEvent(document, "mousemove", handleEvent);
EventUtil.delEvent(document, "mouseup", handleEvent);
}
}
}();
DragDrop.enable();
What we need to explain here are diffX and diffY, which represent the difference between the upper left corner of the element and the mouse pointer.
diffX = x coordinates of mouse-offsetLeft of element object
diffY = y coordinates of mouse-offsetTop of element object
The above is the whole content of this paper, hoping to help everyone's study.