如何在HTML 5中拖动光标图标？

window.app = {
  dragging: false, config: { canDrag: false, cursorOffsetX: null, cursorOffsetY: null }, reset: function () { this.config.cursorOffsetX = null; this.config.cursorOffsetY = null; }, start: function () { document.getElementById('target').addEventListener('mousedown', function (event) { console.log('+++++++++++++ dragstart'); this.dragging = true; this.config.cursorOffsetX = event.offsetX; this.config.cursorOffsetY = event.offsetY; this.adjustPostion(event); }.bind(this)); document.getElementById('target').addEventListener('mousemove', function (event) { if (this.dragging) { console.log('+++++++++++++ drag'); event.target.style.cursor = 'move'; this.adjustPostion(event); } }.bind(this)); document.getElementById('target').addEventListener('mouseup', function (event) { console.log('+++++++++++++ dragend'); this.dragging = false; event.target.style.cursor = 'pointer'; this.reset(); }.bind(this)); }, adjustPostion: function (event) { if (event.clientX <= 0 || event.clientY <= 0) { console.log('skipped'); return; } var elm = document.getElementById('target'); elm.style.left = (event.clientX - this.config.cursorOffsetX) + 'px'; elm.style.top = (event.clientY - this.config.cursorOffsetY) + 'px'

转载于:https://www.cnblogs.com/BluceLee/p/9317701.html