最近工作不是很忙，学习之余想整理一些代码出来，首先想到的就是是js拖拽。 两年前去某公司面试的时候，曾经被问过这个问题，如何在页面上拖放元素，尽管现在看起来很简单，但当时的我半点思路都没有，面试想当然失败了。 这两天趁空闲整理出一个*拖拽的jquery插件：jquery.jsDrag.js。
js拖拽主要用到了鼠标三个事件：mousedown、mousemove、mouseup。
mousedown：鼠标按下
mouseup：鼠标松开
mousemove：鼠标移动
mousedown和click的区别：鼠标点击的整个过程会发生 mousedown→mouseup→click三个事件， click在最后鼠标松开之后才会发生。
htm框架：<div class="jsDrag" ><div class="drager"></div></div>，.drager素是我们点击拖拽的元素，.jsDrag为拖拽元素可移动的空间。
调用方式：$(".jsDrag").drag(setting) 目前提供三种方式，*拖拽，横向拖拽，纵向拖拽，省略参数的情况下为*拖拽
现在只接收一个属性
type:free|horizontal|vertical
插件源码：
JS
(function($){
$.fn.extend({
drag: function(setting){
var settting = setting || {};
var config = {
type: "free"
};
config = $.extend(config, setting);
this.each(function(){
var $panel = $(this) ;
var $drag = $panel.find(".drager");
var coor = {};
var pos = {};
var flag = false;
$drag.mousedown(function(evt){
coor.cX = evt.clientX;
coor.cY = evt.clientY;
pos.left = parseInt($drag.css("left"));
pos.top = parseInt($drag.css("top"));
flag = true;
});
$(document).mousemove(function(evt){
if (flag) {
var maxWidth = $panel.width() - $drag.width();
var maxHeight = $panel.height() - $drag.height();
var nowLeft = (pos.left+(evt.clientX-coor.cX));
var nowTop = (pos.top+(evt.clientY-coor.cY));
pos.left = nowLeft <= 0 ? 0 : (nowLeft > maxWidth ? maxWidth : nowLeft);
pos.top = nowTop <= 0 ? 0 : (nowTop > maxHeight ? maxHeight : nowTop);
var cssParam = {"left": pos.left, "top":pos.top};
switch (config.type) {
case "free" :
break;
case "horizontal" :
delete cssParam["top"];
break;
case "vertical" :
delete cssParam["left"];
break;
}
$drag.css(cssParam);
coor.cX = evt.clientX;
coor.cY = evt.clientY;
}
}).mouseup(function(evt){
flag = false;
});
});
return this;
}
});
})(jQuery);
CSS
.jsDrag {
position:relative;
width:800px;
height:50px;
margin:0 auto;
background:#FF0;
border:1px solid #ccc;
}
.drager {
background:#000;
width:10px;
height:10px;
position:absolute;
top:;
left:;
cursor:pointer;
}
需要注意的是，不要给.jsDrag 设置padding等样式， 有需要的话可以把样式设置到.jsDrag父元素上