A, EventUtil.js
Specifically refer to " EventUtil-- cross-browser event object " Address: https://www.cnblogs.com/hykun/p/EventUtil.html
was Adverse Event = {
addHandler: function(element, type, handler) {
// Add an event
if (element.addEventListener) {
element.addEventListener (type, handler, false) // add events using DOM2-level approach
} else if (element.attachEvent) {
// add an event using IE method
element.attachEvent('on' + type, handler)
} else {
element [ 'on' + type] = handler // add events scale method using DOM0
}
},
removeHandler: function(element, type, handler) {
// cancel the event
if (element.removeEventListener) {
element.removeEventListener(type, handler, false)
} else if (element.detachEvent) {
element.detachEvent('on' + type, handler)
} else {
element['on' + type] = null
}
},
getEvent: function(event) {
// use this method to obtain a cross-browser event object
return event ? event : window.event
},
getTarget: function(event) {
// returns the actual target event
return event.target || event.srcElement
},
preventDefault: function(event) {
// prevent the event's default behavior
if (event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false
}
},
stopPropagation: function(event) {
// stop the spread of events in the DOM immediately
// avoid triggering document.body registered in the above event handlers
if (event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble = true
}
},
getRelatedTarget: function(event) {
// Get mouseover and mouseout related elements
if (event.relatedTarget) {
return event.relatedTarget
} else if (event.toElement) {
// compatible IE8-
return event.toElement
} else if (event.formElement) {
return event.formElement
} else {
return null
}
},
getButton: function(event) {
// Get mousedown or mouseup button is pressed or released in which a mouse
if (document.implementation.hasFeature('MouseEvents', '2.0')) {
return event.button
} else {
switch (
The button attribute mapping event.button // IE model in the DOM model attributes button
) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0 // a primary mouse button is pressed (usually the left)
case 2:
case 6:
return 2 // pressed middle mouse button
case 4:
return 1 // secondary mouse button (usually the right)
}
}
},
getWheelDelta: function(event) {
// Gets the value of the mouse wheel scrolling direction
if (event.wheelDelta) {
return event.wheelDelta
} else {
return -event.detail * 40
}
},
getCharCode: function(event) {
// cross-browser to get the same character encoding, use the keypress event
if (typeof event.charCode == 'number') {
return event.charCode
} else {
return event.keyCode
}
}
}
Second, the custom event - CustomEvent.js
/**
* Custom Event
*/
function EventTarget() {
// store event handler
this.handlers = {}
}
EventTarget.prototype = {
constructor: EventTarget,
// Register an event handler to a given type of event
addHandler: function(type, handler) {
if (typeof this.handlers[type] == 'undefined') {
this.handlers[type] = []
}
this.handlers[type].push(handler)
},
// used to trigger an event
fire: function(event) {
if (!event.target) {
event.target = this
}
if (this.handlers[event.type] instanceof Array) {
var handlers = this.handlers[event.type]
for (var i = 0, len = handlers.length; i < len; i++) {
handlers[i](event)
}
}
},
// for the cancellation of an event type of event handlers
removeHandler: function(type, handler) {
if (this.handlers[type] instanceof Array) {
var handlers = this.handlers[type]
for (var i = 0, len = handlers.length; i < len; i++) {
if (handlers[i] === handler) {
break
}
}
handlers.splice(i, 1)
}
}
}
Third, drag and drop events --- drag.js
var DragDrop = (function() {
var dragdrop = new EventTarget(),
dragging = null,
diffX = 0,
diffY = 0
function handleEvent(event) {
// get events and objects
event = EventUtil.getEvent(event)
var target = EventUtil.getTarget(event)
// determine the type of event
switch (event.type) {
case 'mousedown':
if (target.className.indexOf('draggable') > -1) {
dragging = target
diffX = event.clientX - target.offsetLeft
diffY = event.clientY - target.offsetTop
dragdrop.fire({
type: 'dragstart',
target: dragging,
x: event.clientX,
y: event.clientY
})
}
break
case 'mousemove':
if (dragging !== null) {
// Specify location
dragging.style.left = event.clientX - diffX + 'px'
dragging.style.top = event.clientY - diffY + 'px'
// trigger a custom event
dragdrop.fire({
type: 'drag',
target: dragging,
x: event.clientX,
y: event.clientY
})
}
break
case 'mouseup':
dragdrop.fire({
type: 'bearing'
target: dragging,
x: event.clientX,
y: event.clientY
})
dragging = null
break
}
}
// Public Interface
dragdrop.enable = function() {
EventUtil.addHandler(document, 'mousedown', handleEvent)
EventUtil.addHandler(document, 'mousemove', handleEvent)
EventUtil.addHandler(document, 'mouseup', handleEvent)
}
dragdrop.disable = function() {
EventUtil.removeHandler(document, 'mousedown', handleEvent)
EventUtil.removeHandler(document, 'mousemove', handleEvent)
EventUtil.removeHandler(document, 'mouseup', handleEvent)
}
return dragdrop
})()
Four, html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./EventUtil.js"></script>
<script src="./CustomEvent.js"></script>
<script src="./drag.js"></script>
<title>Document</title>
<style>
# MyDiv1 {
position: absolute;
width: 200px;
height: 200px;
background-color: aqua;
}
#myDiv2 {
position: absolute;
width: 200px;
height: 200px;
background-color: salmon;
}
#myDiv3 {
position: absolute;
width: 200px;
height: 200px;
background-color: slateblue;
}
</style>
</head>
<body>
<script>
// Print Console drop location
DragDrop.addHandler("dragstart", function (event) {
var status = document.getElementById("status");
console.log("Started dragging " + event.target.id);
});
DragDrop.addHandler("drag", function (event) {
var status = document.getElementById("status");
console.log("<br/> Dragged " + event.target.id + " to (" + event.x +
"," + event.y + ")");
});
DragDrop.addHandler("dragend", function (event) {
var status = document.getElementById("status");
console.log("<br/> Dropped " + event.target.id + " at (" + event.x +
"," + event.y + ")");
});
// Load drag and drop events
DragDrop.enable()
</script>
<p id="status"></p>
<div id="myDiv1" class="draggable"></div>
<div id="myDiv2" class="draggable"></div>
<div id="myDiv3" class="draggable"></div>
</body>
</html>