JavaScript学习笔记(八)拖放
1. 元素跟随鼠标
document.addEventListener('mousemove', function(event) {
var myDiv = document.getElementById('myDiv')
myDiv.style.left = event.clientX + 'px'
myDiv.style.top = event.clientY + 'px'
})
2. 可拖动元素的事件
var DragDrop = function () { var dragdrop = new EventTarget() var dragging = null var diffX = 0 var diffY = 0 function handleEvent(event) { var target = event.target switch(event.type) { case 'mousedown': if (target.className.indexOf('draggble') > -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) { dragging.style.left = (event.clientX - diffX) + 'px' dragging.style.top = (event.clientY - diffY) + 'px' dragdrop.fire({type: 'drag', target: dragging, x: event.clientX, y: event.clientY}) } break case 'mouseup': dragging = null dragdrop.fire({type: 'dragend', target: dragging, x: event.clientX, y: event.clientY}) break } } dragdrop.enable = function() { document.addEventListener('mousedown', handleEvent) document.addEventListener('mousemove', handleEvent) document.addEventListener('mouseup', handleEvent) } dragdrop.disable = function() { document.removeEventListener('mousedown', handleEvent) document.removeEventListener('mousemove', handleEvent) document.removeEventListener('mouseup', handleEvent) } return dragdrop } var dragdrop = DragDrop() dragdrop.addHandler('dragstart', function(event) { console.log('start', event) }) dragdrop.addHandler('drag', function(event) { console.log('drag', event) }) dragdrop.addHandler('dragend', function(event){ console.log('end', event) }) dragdrop.enable()
参考: EventTarget