1.插件壳子
(function($) {
$.fn.dragDiv=function(...) {...}
})(jQuery);
可以直接在jQuery的基础上扩展插件（用了个立即执行写法）
2.插件变量命名
用$前缀命名变量 代指jQuery对象 好区分
3.原理
本质上就是封装了一个方法，在该方法中定义公用变量，然后处理拖拽对象，给它上一堆基于公用变量（参数）的事件触发逻辑，以达到拖拽功能
4.应用场景
在实际开发中一个赌博游戏的显示面板对于超出的信息客户不想用滚动条实现
5.源代码
(function($) {
$.fn.dragDiv=function(divWrap) {
return this.each(function() {
//$(selector).each(function(index,element))//index从0开始
//each()方法规定为每个匹配元素规定运行的函数。
var $divMove = $(this);//鼠标可拖拽区域
var $divWrap = divWrap ? $divMove.parents(divWrap) : $divMove;//整个移动区域,影响到的父类区域（加了个父类判定）
//parents()获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。
//.parents(selector)
var mX =0,mY =0;//定义鼠标X轴Y轴
var dX =0,dY =0;//定义div左、上位置
var eX = $divWrap.offset().left;//起始X坐标
var eY = $divWrap.offset().top;//起始Y坐标
var isDown =false;//mousedown标记
if(document.attachEvent) {
//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
$divMove[0].attachEvent('onselectstart',function() {
//禁止选择：onselectstart="return false"；
return false;
});
}
$divMove.mousedown(function(event) {
varevent = event ||window.event;
mX = event.clientX;
mY = event.clientY;
dX = $divWrap.offset().left;
dY = $divWrap.offset().top;
//offset()方法设置或返回被选元素相对于文档的偏移坐标。 经测试确实是文档
isDown =true;//鼠标拖拽启动
});
// $(document).mousemove(function(event) {
$divWrap.mousemove(function(event) {//这儿改写移动触发区域
varevent = event ||window.event;
varx = event.clientX;//鼠标滑动时的X轴
vary = event.clientY;//鼠标滑动时的Y轴
//测试组件偏移量
// dX = $divWrap.offset().left;
// dY = $divWrap.offset().top;
// console.log( "(" + dX + "," + dY + ")" );
if(isDown) {//isDown判定拖拽触发
// $divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div动态位置赋值
//使用$(selector).offset({top:value,left:value})方法优化
//$divWrap.offset({top:y - mY + dY,left:x - mX + dX})
if((x - mX +dX) < eX){//鼠标移动方向判定相较于起始坐标
$divWrap.offset({top:dY,left:x - mX + dX})
}
}
});
// $divMove.mouseup(function() {
$(document).mouseup(function() {//这儿改写停止触发区域
isDown =false;//鼠标拖拽结束
});
});
};
})(jQuery);
//
$(document).ready(function() {
// $("#move1").dragDiv();//拖拽整个div
// $("#move2").dragDiv(".divWrap");//拖拽div头部
$(".table").dragDiv();//拖拽div头部
});
网友评论