一直以来，都对JS获取元素的位置感到非常的困惑：一会client、一会offset、一会scroll。
再加上各大浏览器之间的不兼容，唉，搞得哥晕晕乎乎的。
而很多页面效果都要用到这些位置。不得已，得练练，得记记。
下面就来说说这个基于 JQuery的简易拖拽插件吧。
按惯例，先说说拖拽的原理，以及搞这么一个东东的步骤：
那什么是拖拽呢？ 看名字就知道了：就是把一个东东拖来拽去的。 放到我们的DOM上，就是改变它的位置。
它只有两个难点：1、如何知道是在拖？ 2、如何知道从哪拖，拖到哪？
其实，这也算不上难点，毕竟两者都是基础的东西，关键在于熟练。
换到js 中，我们搞一个拖拽效果，大致有如下步骤：
1、让元素捕获事件（一般情况下，无非就是mousedown、mousemove、mouseup)
2、在mousedown时，标记开始拖拽，并获取元素及鼠标的位置。
3、在mousemove时，不断的获取鼠标的新位置，并通过相应的位置算法，来重新定位元素位置。
4、在mouseup时，结束拖拽。。。然后周而复始。
这中间，个需要注意的地方：被拖拽的元素，至少需要相对或绝对定位，否则拖拽不会有效果。
OK，不多说，无代码，无真相。相应的解释都在其中了：
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < title > Jeremy - DragDrop Test ! </ title > < meta name ="keywords" content ="Javascript自由拖拽类" /> < script type ="text/javascript" src ="jquery-1.4.2.min.js" ></ script > < script type ="text/javascript" > ( function ($) { $.extend({ // 获取鼠标当前坐标 mouseCoords: function (ev){ if (ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY};} return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; }, // 获取样式值 getStyle: function (obj,styleName) { return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj, null )[styleName]; // return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName); } }); // 元素拖拽插件 $.fn.dragDrop = function (options) { var opts = $.extend({},$.fn.dragDrop.defaults,options); return this .each( function (){ // 是否正在拖动 var bDraging = false ; // 移动的元素 var moveEle = $( this ); // 点击哪个元素，以触发移动。 // 该元素需要是被移动元素的子元素（比如标题等） var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveEle ; if ( ! focuEle || focuEle.length <= 0 ) { alert( ' focuEle is not found! the element must be a child of ' + this .id); return false ; } // initDiffX|Y : 初始时，鼠标与被移动元素原点的距离 // moveX|Y : 移动时，被移动元素定位位置 (新鼠标位置与initDiffX|Y的差值) // 如果定义了移动中的回调函数，该对象将以参数传入回调函数。 var dragParams = {initDiffX: '' ,initDiffY: '' ,moveX: '' ,moveY: '' }; // 被移动元素，需要设置定位样式，否则拖拽效果将无效。 moveEle.css({ ' position ' : ' absolute ' , ' left ' : ' 0 ' , ' top ' : ' 0 ' }); // 点击时，记录鼠标位置 // DOM写法： getElementById('***').οnmοusedοwn= function(event); focuEle.bind( ' mousedown ' , function (e){ // 标记开始移动 bDraging = true ; // 改变鼠标形状 moveEle.css({ ' cursor ' : ' move ' }); // 捕获事件。（该用法，还有个好处，就是防止移动太快导致鼠标跑出被移动元素之外） if (moveEle.get( 0 ).setCapture) { moveEle.get( 0 ).setCapture(); } // （实际上是鼠标当前位置相对于被移动元素原点的距离） // DOM写法：(ev.clientX + document.body.scrollLeft - document.body.clientLeft) - document.getElementById('***').style.left; dragParams.initDiffX = $.mouseCoords(e).x - moveEle.position().left; dragParams.initDiffY = $.mouseCoords(e).y - moveEle.position().top; }); // 移动过程 focuEle.bind( ' mousemove ' , function (e){ if (bDraging) { // 被移动元素的新位置，实际上鼠标当前位置与原位置之差 // 实际上，被移动元素的新位置，也可以直接是鼠标位置，这也能体现拖拽，但是元素的位置就不会精确。 dragParams.moveX = $.mouseCoords(e).x - dragParams.initDiffX; dragParams.moveY = $.mouseCoords(e).y - dragParams.initDiffY; // 是否限定在某个区域中移动. // fixarea格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值] if (opts.fixarea) { if (dragParams.moveX < opts.fixarea[ 0 ]) { dragParams.moveX = opts.fixarea[ 0 ] } if (dragParams.moveX > opts.fixarea[ 1 ]) { dragParams.moveX = opts.fixarea[ 1 ] } if (dragParams.moveY < opts.fixarea[ 2 ]) { dragParams.moveY = opts.fixarea[ 2 ] } if (dragParams.moveY > opts.fixarea[ 3 ]) { dragParams.moveY = opts.fixarea[ 3 ] } } // 移动方向：可以是不限定、垂直、水平。 if (opts.dragDirection == ' all ' ) { // DOM写法： document.getElementById('***').style.left = '***px'; moveEle.css({ ' left ' :dragParams.moveX, ' top ' :dragParams.moveY}); } else if (opts.dragDirection == ' vertical ' ) { moveEle.css({ ' top ' :dragParams.moveY}); } else if (opts.dragDirection == ' horizontal ' ) { moveEle.css({ ' left ' :dragParams.moveX}); } // 如果有回调 if (opts.callback) { // 将dragParams作为参数传递 opts.callback.call(opts.callback,dragParams); } } }); // 鼠标弹起时，标记为取消移动 focuEle.bind( ' mouseup ' , function (e){ bDraging = false ; moveEle.css({ ' cursor ' : ' default ' }); if (moveEle.get( 0 ).releaseCapture) { moveEle.get( 0 ).releaseCapture(); } }); }); }; // 默认配置 $.fn.dragDrop.defaults = { focuEle: null , // 点击哪个元素开始拖动,可为空。不为空时，需要为被拖动元素的子元素。 callback: null , // 拖动时触发的回调。 dragDirection: ' all ' , // 拖动方向：['all','vertical','horizontal'] fixarea: null // 限制在哪个区域拖动,以数组形式提供[minX,maxX,minY,maxY] }; })(jQuery); // test $( function (){ // 限定区域，有回调函数。 $( ' #dragDiv ' ).dragDrop({fixarea:[ 0 ,$( ' #dragContainer ' ).width() - 50 , 0 ,$( ' #dragContainer ' ).height() - 50 ],callback: function (params){ $( ' #span1 ' ).text( ' X: ' + params.moveX + ' Y: ' + params.moveY); }}); // 默认设置 $( ' #dragDiv1 ' ).dragDrop(); }); </ script > </ head > < body > < div id ="dragContainer" style ="position:relative;left:10px;top:10px;border:1px dashed blue;width:500px;height:500px;" > < div id ="dragDiv" style ="background-color:blue;height:50px;width:50px;" > </ div > < div id ="dragDiv1" style ="border:1px solid red;height:50px;width:50px;" > </ div > </ div > < span id ="span1" ></ span > </ body > </ html >
<h3>
心静似高山流水不动，心清若巫峰雾气不沾。
</h3>
心静似高山流水不动，心清若巫峰雾气不沾。
</h3>
扫一扫
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
