首頁 >web前端 >js教程 >学习drag and drop js实现代码经典之作_javascript技巧

学习drag and drop js实现代码经典之作_javascript技巧

WBOY原創: 2016-05-16 18:53:471426瀏覽

Pro Javascript Techniques书中推荐的drag and drop 例子：http://boring.youngpup.net/2001/domdrag

<title>Drag</title> 
<style type="text/css"> 
</style> 
<script type="text/javascript"> 
var Drag = { 
        //当前被drag的对象 
obj: null, 
//初始化 
init: function(id){ 
var o = document.getElementById(id); 
//当onmousedown开始拖拽 
o.onmousedown = Drag.start; 
}, 
start: function(e){ 
var o = Drag.obj = this; 
//lastMouseX，lastMouseY记录上次鼠标的位置 
o.lastMouseX = Drag.getEvent(e).x; 
o.lastMouseY = Drag.getEvent(e).y; 
//当onmousemove开始移动 
document.onmousemove = Drag.move; 
//当onmouseup终止拖拽 
document.onmouseup = Drag.end; 
}, 
move: function(e){ 
var o = Drag.obj; 
//dx, dy表示鼠标移动的距离 
var dx = Drag.getEvent(e).x - o.lastMouseX; 
var dy = Drag.getEvent(e).y - o.lastMouseY; 
//因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化 
var left = parseInt(o.style.left) + dx ; 
var top = parseInt(o.style.top) + dy; 
o.style.left = left; 
o.style.top = top; 
o.lastMouseX = Drag.getEvent(e).x; 
o.lastMouseY = Drag.getEvent(e).y; 
}, 
end: function(e){ 
document.onmousemove = null; 
document.onMouseup = null; 
Drag.obj = null; 
}, 
//辅助函数，处理IE和FF不同的event模型 
getEvent: function(e){ 
                                if (typeof e == 'undefined'){ 
                                    e = window.event; 
                                } 
                                //alert(e.x?e.x : e.layerX); 
                                if(typeof e.x == 'undefined'){ 
                                    e.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了 
                                } 
                                if(typeof e.y == 'undefined'){ 
                                    e.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了 
                                } 
                                return e; 
                        } 
};

</script> 
 
 
<div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"></div> 
<div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"></div> 
<div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:80px; width:80px;"></div> 
 
<script type="text/javascript"> 
    //测试代码开始，使三个div具有drag and drop的能力。 
Drag.init('r'); 
Drag.init('g'); 
Drag.init('b'); 
        </script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

打包下载地址

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript 绘制矩形框_javascript技巧下一篇：javascript 对象比较实现代码_javascript技巧

看更多

学习drag and drop js实现代码经典之作_javascript技巧

相關文章