原文来自:
http://www.cainiao8.com/web/js_examples/14_tuozhuai2.html
上一节我们实现了基本的拖拽,但是需要给可拖拽的元素设置一个特定的id,然后再在JS中修改代码,使用起来比较麻烦。这样一旦文档结构发生变化就要调整JS代码,没有做到JavaScript与HTML分离的原则。
所以应该实现一个可以适用于多个元素的拖拽代码,而且代码在可拖拽元素改变后应该不需要修改而仍然能正常工作。
使用class做“钩子”
为了使代码适用于多个元素,我们使用它的class来指定元素是否可以拖拽。我们使用如下的JavaScript代码来遍历文档中所有的节点,然后让class为drag的元素可以被拖拽。
function dragInit(node){
if(node.className == "drag"){
node.onmousedown = down;
node.onmousemove = move;
node.style.position = "relative";
node.style.top = "0px";
node.style.left = "0px";
}
var children = node.childNodes;
for(var i = 0;i < children.length; i++){
dragInit(children[i]);
}
}
dragInit函数会逐个检查各个节点的class是否为drag,如是是,那么会为该元素设置鼠标经过、鼠标按下事件的响应函数。
多个元素一起移动的问题
上面我们已经实现了多个元素可移动的问题。可以进入这个网页测试一下。可以发现这个拖拽效果有一个严重的问题。当我们拖动div1的时候,如果鼠标路径经过了div2,那么两个div会同时移动。原因是这触发了 div2的onmouseover事件。我们可以通过给元素设置z-index的方法来解决。因为当我们拖动z-index较高的元素经过z-index 较低的元素时并不会触发z-index较低元素的鼠标经过事件。所以我们对代码做出如下修改:
<script type="text/javascript">
var max = 1;//定义一个max变量
……其它部分不变
function down(event)
{
……
//保证点击元素的z-index最高
this.style.zIndex = max++;
}
</script>
我们设置了一个max变量来记录当前的z-index值,当点击一个元素的时候就用max的值来设置它的z-index属性,同时max的值会变大。这样就实现了每次拖拽一个元素的时候,不会触发其它元素的mouseover事件。但是,
我们发现,当拖动元素的速度非常快的时候,仍然会造成两个元素一起移动。我个人认为这是浏览器处理事件的延迟造成的。通过给每个对象分别设置一个判断拖拽状态的布尔变量dragging就可以解决这个问题了。最终的代码如下:
拖拽JavaScript代码
<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——修复错误
分享到:
相关推荐
js JavaScript 拖放效果 将某元素拖拽入某个元素
javascript 拖放效果实现代码.docx
超经典JavaScript 拖放效果.拖放效果,也叫拖拽、拖动,学名Drag-and-drop.无可挑剔,超级经典,JavaScript 爱好者不下载,不去看一定后悔。欢迎下载.此信息出自:...
Javascript拖放框架.rar Javascript拖放框架.rar
interact.js实现JavaScript拖放,调整大小和多点触摸惯性和捕捉手势
Javascript定时器(二)——setTimeout与setInterval 在 http://www.cnblogs.com/strick/p/3983904.html 有说明
( Sortable – 简单灵活的 JavaScript 拖放排序插件, ( Sortable – 简单灵活的 JavaScript 拖放排序插件 亲测很好用,修改简单
javascript高级技巧的应用——示例
绝对好用,可以看看小示例,一看就知道是不是自己想要的。
资源JavaScript 函数式编程精要 —— 签约作者安东尼知识分享
本文实例讲述了JavaScript实现的多种鼠标拖放效果。分享给大家供大家参考,具体如下: 这是一款JavaScript鼠标拖放效果代码,通过本示例了解触发对象,设置范围限制,指定容器大小水平及垂直锁定,还包括获取和释放...
HTML5中实现拖放效果无须借助javascript.docx
JavaScript 自动播放——Js幻灯片缓冲效果.rarJavaScript 自动播放——Js幻灯片缓冲效果.rarJavaScript 自动播放——Js幻灯片缓冲效果.rarJavaScript 自动播放——Js幻灯片缓冲效果.rarJavaScript 自动播放——Js...
全书配套269个JavaScript特效
Dragula 是一个 JavaScript 库,实现了网页上的拖放功能。提供 JavaScript、AngularJS 和 React 版本。示例代码:dragula([left, right]).on('drag', function (el) { el.className = el.className.replace...
JavaScript 图片切割效果(带拖放、缩放效果) JavaScript 图片切割效果(带拖放、缩放效果)
拖放效果,也叫拖拽、拖动,学名Drag-and-drop ,是最常见的js特效之一。 如果忽略很多细节,实现起来很简单,但往往细节才是难点所在。
JavaScript擅长于修改页面中的DOM元素,但是我们使用JavaScript通常只是实现一些简单功能,例如实现图片的翻转,网页中的标签页,等等。这篇文章将向你展示如何在页面中,对创建的元素实现拖放。