元素拖动
元素拖动(移动位置)
元素拖动涉及事件:mousedown,mousemove,mouseup
思路:鼠标按下点坐标M1和移动后鼠标点坐标M2的距离与元素开始时的left和移动后的left之间的距离是相同的:
1)鼠标按下时,计算鼠标坐标与元素left/top之间的距离disX/disY;
2)鼠标移动时,使用鼠标坐标减去disX和disY,就时元素的left和top值;
注意:
1)元素拖动速度过快时,鼠标脱离元素内,会导致拖动中断或不连续:将move和up事件作用于document对象;
2)img元素拖动时会有默认行为,会导致效果无法达到预期:在down事件的最后使用return false阻止掉默认行为;
3)元素中间存在文本时,在ie浏览器上选中文本时会导致拖拽有问题:在down事件中使用setCapture全局捕获(生成一个透明的层),在up事件中使用releaseCapture释放全局捕获(setCapture该法是IE浏览器专有);
<body> <div class="drag-box">我是足球标题</div> <img src="img/ball.jpg" class="drag-box" style="display: none"> </body>
<style> .drag-box{position:absolute;width: 210px;height: 210px; background:url("img/ball.jpg") no-repeat;text-align: center} </style>
window.onload = function () { var dragBox = document.getElementsByClassName('drag-box')[0]; var disX = 0; var disY = 0; //鼠标按下drag-box dragBox.onmousedown = function (ev) { var ev = ev || window.event; disX = ev.clientX - dragBox.offsetLeft; disY = ev.clientY - dragBox.offsetTop; //IE:全局捕获 if(dragBox.setCapture){ dragBox.setCapture(); } //鼠标按下并拖动drag-box document.onmousemove = function (ev) { var L = ev.clientX - disX; var T = ev.clientY - disY; dragBox.style.left = L + 'px'; dragBox.style.top = T + 'px'; }; //鼠标松开,清除mouseMove和mouseUp事件 document.onmouseup = function (ev) { document.onmousemove = null; document.onmouseup = null; //IE:释放全局捕获 if(dragBox.releaseCapture){ dragBox.releaseCapture(); } }; //阻止img元素的默认行为 return false; }; }
元素拖动(改变大小)
元素拖动涉及事件:mousedown,mousemove,mouseup;
思路:鼠标按下后移动的距离等于元素宽/高改变的大小
1)鼠标按下时,记录鼠标坐标和元素的宽/高;
2)鼠标移动时,计算鼠标坐标移动的距离,元素宽/高加上这个改变的距离即等于元素当前的大小;
<body> <div class="drag-box"> <div class="drag-handler"></div> </div> </body>
<style> .drag-box{position: absolute; width: 200px; height: 200px; background: deeppink;} .drag-handler{position: absolute; width: 20px; height: 20px; background: yellow; right: 0; bottom: 0;} </style>
window.onload = function () { var dragBox = document.getElementsByClassName('drag-box')[0]; var dragHandler = document.getElementsByClassName('drag-handler')[0]; var clientX = 0; var clientY = 0; var disW = 0; var disH = 0; //按下元素 dragHandler.onmousedown = function(ev){ var ev = ev || window.event; //1)记录鼠标坐标和元素的宽/高 clientX = ev.clientX; clientY = ev.clientY; disW = dragBox.offsetWidth; disH = dragBox.offsetHeight; //拖动元素 document.onmousemove = function(ev){ var ev = ev || window.event; //2)计算元素当前宽高=鼠标移动距离+元素原宽高 var W = ev.clientX - clientX + disW; var H = ev.clientY - clientY + disH; //控制元素最小值 if(W < 100) W = 100; if(H < 100) H = 100; dragBox.style.width = W + 'px'; dragBox.style.height = H + 'px'; }; //释放元素 document.onmouseup = function(ev){ document.onmousemove = null; document.onmouseup = null; } }; }