<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????.box { ???????????????width: 200px; ???????????????height: 200px; ???????????????background-color: #000000; ???????????????position: absolute; ???????????????left: 0; ???????????????top: 0; ???????????????color: #FFFFFF; ???????????????line-height: 200px; ???????????????font-size: 20px; ???????????????cursor: move; ???????????} ???????</style> ???</head> ???<body> ???????<div id="box" class="box"> ???????????拖拽事件，文字选中 ???????</div> ???????<script type="text/javascript"> ???????????window.onload = function() { ???????????????var oBox = document.getElementById("box"); ???????????????//修正文字选中问题 ???????????????oBox.onselectstart = function() { ???????????????????return false; ???????????????} ???????????????oBox.ondragstart = function() { ???????????????????return false; ???????????????} ???????????????oBox.onmousedown = function(e) { ???????????????????var top = this.offsetTop; ???????????????????var left = this.offsetLeft; ???????????????????//起点 ???????????????????var originX = e.clientX; ???????????????????var originY = e.clientY; ???????????????????document.onmousemove = function(e) { ???????????????????????var endX = e.clientX; ???????????????????????var endY = e.clientY; ???????????????????????//X轴、Y轴移动距离 ???????????????????????var distanceX = endX - originX; ???????????????????????var distanceY = endY - originY; ???????????????????????oBox.style.left = (left + distanceX) + "px"; ???????????????????????oBox.style.top = (top + distanceY) + "px"; ???????????????????} ???????????????} ???????????????//移除move事件 ???????????????document.onmouseup = function() { ???????????????????document.onmousemove = null; ???????????????} ???????????????//鼠标移动mouseover ???????????????oBox.onmousemove = function(e) { ???????????????????//box宽度高度 ???????????????????var width = this.offsetWidth; ???????????????????var height = this.offsetHeight; ???????????????????//box的top/left ???????????????????var top = this.offsetTop; ???????????????????var left = this.offsetLeft; ???????????????????//鼠标坐标 ???????????????????var mouseX = e.clientX; ???????????????????var mouseY = e.clientY; ???????????????????//最大坐标X,最大坐标Y ???????????????????var maxX = left + width; ???????????????????var maxY = top + height; ???????????????????if(maxX - mouseX < 10 && maxY - mouseY < 10) { ???????????????????????this.style.cursor = "nw-resize"; ???????????????????} else { ???????????????????????this.style.cursor = "move"; ???????????????????} ???????????????} ???????????} ???????</script> ??????????</body></html>原生js实现 拖拽事件
原文地址：https://www.cnblogs.com/150536FBB/p/9787419.html