拖放成效系列 二

拖放效果系列 二

上一节我们实现了基本的拖拽，但是需要给可拖拽的元素设置一个特定的id，然后再在JS中修改代码，使用起来比较麻烦。这样一旦文档结构发生变化就要调整JS代码，没有做到JavaScript与HTML分离的原则。

所以应该实现一个可以适用于多个元素的拖拽代码，而且代码在可拖拽元素改变后应该不需要修改而仍然能正常工作。
使用class做“钩子”

为了使代码适用于多个元素，我们使用它的class来指定元素是否可以拖拽。我们使用如下的JavaScript代码来遍历文档中所有的节点，然后让class为drag的元素可以被拖拽。

<script type="text/javascript">var dragging = false;var mouseY;var mouseX;var max = 1;function dragInit(node){if(node.className == "drag"){ node.onmousedown = down;node.onmousemove = move;node.onmouseover = over;node.onmouseup = up;node.style.position = "relative";node.style.top = "0px";node.style.left = "0px";node.dragging = false;}var children = node.childNodes;for(var i = 0;i < children.length; i++){dragInit(children[i]);}}window.onload = function(){dragInit(document);document.onmouseup = docUp;}function down(event){event = event || window.event; dragging = true; this.dragging = true; mouseX = parseInt(event.clientX);mouseY = parseInt(event.clientY);objY = parseInt(this.style.top);objX = parseInt(this.style.left);this.style.zIndex = max++;}function move(event){event = event || window.event; if(this.dragging == true && dragging == true){var x,y;y = event.clientY - mouseY + objY;x = event.clientX - mouseX + objX;this.style.top = y + "px";this.style.left = x + "px";}}function up(){this.dragging = false;}function docUp(){dragging = false;}function over(){this.style.cursor = "move";}</script>

做出修改的代码用已经标记了出来。点击进入示例网页。
JavaScript拖拽系列

?? 1. JavaScript拖拽
?? 2. JavaScript拖拽2——多元素、分离JS
?? 3. JavaScript拖拽3——解决快速拖拽的问题
?? 4. JavaScript拖拽4——获得元素的位置
?? 5. JavaScript拖拽5——性能优化
?? 6. JavaScript拖拽6——修复错误

查看更多 下一篇