js练习:动手写一个元素拖放功能(1)

拖放功能很常用,比如在wordpress博客的后台有一个小工具,就是让用户利用拖放将各个小功能组合在一起,其次,HTML5也提供了新的拖放接口,可以更方便的进行元素的拖放(drag和drop),HTML5参考:http://www.w3school.com.cn/html5/html_5_draganddrop.asp

今天是练习js的作业,利用js来实现拖放功能,这一节实现简单的功能,下一节将其修改为面向对象的结构。

代码完整测试(包括范围限制)。

思路

1.设置一个元素,其定位属性为绝对定位
2.当鼠标点到该元素上的时候,计算鼠标所在的位置,并修改元素的top/left值和鼠标位置一致
3.鼠标点击不动,移动鼠标,则元素的位置和鼠标一起移动
4.当鼠标松开的时候,取消鼠标移动功能,则元素的位置就鼠标最后松开的位置

思路开始很简单明了的,那我们就用程序来实现它:

一、首先,创建一个元素,并给它一个样式:


注意一定要设置其绝对定位,因为只有这样,才能修改其top/left值达到定位效果。到此,我们的第一步已经实现。

二、然后,鼠标点击事件,修改元素top、left值

window.onload = function(){
    var box = document.getElementById("box");
    box.onmousedown = function(e){
    var e = e || event;
    var target = e.target || e.srcElement;
    target.style.left = e.clientX + "px";
    target.style.top = e.clientY + "px";
    }   
}

思路中的第二步实现。
这样,当点击鼠标的时候,元素的位置会发生改变:测试DEMO

因为我在之前总结过js中如何获取clientX、offsetWidth等值,所以这里便不多说,具体可看这里:http://wp.me/p6x6a2-mL

三、鼠标移动,元素位置移动

现在实现思路中的第三步,当鼠标移动的时候,元素也跟着移动。

这里有个需要注意的地方,我们要增加onmousemove方法,鼠标移动是在鼠标点击下发生的事件,因为要把onmousemove写到onmousedown中,代码如下:

window.onload = function(){
    var box = document.getElementById("box");
    box.onmousedown = function(e){
    var e = e || event;
    var target = e.target || e.srcElement;
    document.onmousemove = function(e){
        target.style.left = e.clientX + "px";
        target.style.top = e.clientY + "px";            
    }
    }   
}

现在已经初步有了效果,当鼠标移动的时候,元素也移动了。测试DEMO

不过,这有个问题,当我们点击元素中间的时候,元素的左上角会跑到鼠标下面来,这也正常,因为我们的代码本身就是这么写的。

那么,如何才能实现鼠标点哪元素可以不用移动呢?其实也很简单,就是计算好鼠标与元素作伴以及右边的垂直距离,每次移动鼠标的时候保持该距离不变即可。

window.onload = function(){
    var box = document.getElementById("box");
    box.onmousedown = function(e){
    var e = e || event;
    var target = e.target || e.srcElement;
    var disX = e.clientX - target.offsetLeft;
    var disY = e.clientY - target.offsetTop;
    document.onmousemove = function(e){
        target.style.left = e.clientX - disX + "px";
        target.style.top = e.clientY - disY + "px";         
    };
    }   
}

到此,我们的思路第三步也执行完毕,该步骤的测试DEMO

四、当鼠标松开时,取消鼠标移动事件

当鼠标松开时,让onmousemove为null即可取消该事件。

window.onload = function(){
    var box = document.getElementById("box");
    box.onmousedown = function(e){
    var e = e || event;
    var target = e.target || e.srcElement;
    var disX = e.clientX - target.offsetLeft;
    var disY = e.clientY - target.offsetTop;
    document.onmousemove = function(e){
        target.style.left = e.clientX - disX + "px";
        target.style.top = e.clientY - disY + "px";         
    };
    document.onmouseup = function(){
        document.onmousemove = null;
        document.onmousedown = null;
    };
    }   
}

OK,到现在,我们的鼠标拖放事件已经写完了,完成DEMO

总结

效果虽然很简单,但是考查了很多的知识点,我在此并没有进行浏览器测试,要知道有些特性在一些浏览器下显示的数值不一样。

另外,也没有在这里进行范围限制,不过,我将限制的完整代码上传到了github上。点击这里。

代码完整测试(包括范围限制)。

发表评论

电子邮件地址不会被公开。 必填项已用*标注