纯JavaScript写界面小方块的拖曳——五个版本逐步增强
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯JavaScript写界面小方块的拖曳——五个版本逐步增强相关的知识，希望对你有一定的参考价值。
小方块的拖曳
版本一
<style>
div
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
top: 0;
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.addEventListener('mousedown',mouseHandler)
/*鼠标按下去的时候，侦听鼠标移动释放 */
function mouseHandler(e)
document.onmousemove = function(e1)
/*e.offsetX e.offsetY 鼠标按下时相对自身左上角距离 e是按下时的事件对象*/
/*e1.clientX e1.clientY 鼠标相对视口的距离 e1是移动时的事件*/
/* 相对与视口左上角的距离-相对于自身左上角的位置 */
div.style.left = e1.clientX-e.offsetX+'px';
div.style.top = e1.clientY-e.offsetY+'px';
// 当鼠标释放时，清除移动事件和释放事件
document.onmouseup = function(e2)
document.onmousemove = null;
document.onmouseup = null;
</script>
版本二
var offsetX = 0;
var offsetY = 0;
var div = document.querySelector('div')
div.addEventListener('mousedown',mouseHandler)
/*鼠标按下去的时候，侦听鼠标移动释放 */
function mouseHandler(e)
document.addEventListener('mousemove',mousemoveHandler);
document.addEventListener('mouseup',mouseupHandler);
offsetX = e.offsetX;
offsetY = e.offsetY;
function mousemoveHandler(e)
div.style.left = e.clientX-offsetX+'px';
div.style.top = e.clientY-offsetY+'px';
function mouseupHandler(e)
document.removeEventListener('mousemove',mousemoveHandler)
document.removeEventListener('mouseup',mouseupHandler)
版本三
var offsetX = 0;
var offsetY = 0;
var div = document.querySelector('div')
div.addEventListener('mousedown',mouseHandler)
/*鼠标按下去的时候，侦听鼠标移动释放 */
function mouseHandler(e)
if(e.type === 'mousedown')
offsetX = e.offsetX;
offsetY = e.offsetY;
document.addEventListener('mousemove',mouseHandler);
document.addEventListener('mouseup',mouseHandler);
else if(e.type === 'mousemove')
div.style.left = e.clientX-offsetX+'px';
div.style.top = e.clientY-offsetY+'px';
else if(e.type === 'mouseup')
document.removeEventListener('mousemove',mouseHandler)
document.removeEventListener('mouseup',mouseHandler)
版本四
<script>
var div = document.querySelector('div')
div.addEventListener('mousedown',mouseHandler)
/*鼠标按下去的时候，侦听鼠标移动释放 */
function mouseHandler(e)
if(e.type === 'mousedown')
document.offsetX = e.offsetX;
document.offsetY = e.offsetY;
document.addEventListener('mousemove',mouseHandler);
document.addEventListener('mouseup',mouseHandler);
else if(e.type === 'mousemove')
div.style.left = e.clientX-this.offsetX+'px';
div.style.top = e.clientY-this.offsetY+'px';
else if(e.type === 'mouseup')
document.removeEventListener('mousemove',mouseHandler)
document.removeEventListener('mouseup',mouseHandler)
</script>
多个div拖曳
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var divs = document.querySelectorAll('div')
for(var i=0;i<divs.length;i++)
divs[i].addEventListener('mousedown',mouseHandler)
/*鼠标按下去的时候，侦听鼠标移动释放 */
function mouseHandler(e)
if(e.type === 'mousedown')
document.offsetX = e.offsetX;
document.offsetY = e.offsetY;
document.div = this
document.addEventListener('mousemove',mouseHandler);
document.addEventListener('mouseup',mouseHandler);
else if(e.type === 'mousemove')
e.preventDefault();
this.div.style.left = e.clientX-this.offsetX+'px';
this.div.style.top = e.clientY-this.offsetY+'px';
else if(e.type === 'mouseup')
document.removeEventListener('mousemove',mouseHandler)
document.removeEventListener('mouseup',mouseHandler)
</script>
拖曳图片的封装Utils函数
// 自执行函数，执行后返回一个对象，赋值给Utils变量
var Utils=(function()
return
dragOn: function (elem)
Utils.eachEvent(elem, function (item)
item.addEventListener('mousedown',Utils.mouseHandler)
)
,
dragOff : function (elem)
Utils.eachEvent(elem, function (item)
item.removeEventListener('mousedown',Utils.mouseHandler)
)
,
mouseHandler: function (e)
if (e.type === 'mousedown')
document.div = this
document.offsetX = e.offsetX;
document.offsetY = e.offsetY;
document.addEventListener('mousemove', Utils.mouseHandler)
document.addEventListener('mouseup',Utils.mouseHandler)
else if (e.type === 'mousemove')
this.div.style.left = e.clientX - this.offsetX + 'px'
this.div.style.top = e.clientY - this.offsetY + 'px'
else if (e.type === 'mouseup')
document.removeEventListener('mousemove', Utils.mouseHandler)
document.removeEventListener('mouseup',Utils.mouseHandler)
,
eachEvent: function (elem,callback)
if (elem.length)
for (var item of elem)
if (item instanceof htmlElement)
callback(item)
else if (elem instanceof HTMLElement)
callback(elem);
)();
以上是关于纯JavaScript写界面小方块的拖曳——五个版本逐步增强的主要内容，如果未能解决你的问题，请参考以下文章
小5聊一年一度的10.24来了，小5用jQuery纯手工实现下经典游戏，俄罗斯方块