自己定义拖拽框插件
1、HTML代码例如以下 注意引入jquery和自定仪的drag.js , 路径正确打开页面就能看到效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>拖拽jQuery </title>
<style type="text/css">
*{margin:0;padding:0;border:0;}
</style>
</head>
<body>
<div class="divbox" arrow="left" style="border:1px solid red;width:500px;height:200px;background:#f7f7f7;position:absolute;top:100px;left:100px;">
<h3 style="height:30px;background:#181818;color:#fff;">1111111</h3>
左右移动 由arrow="left"控制
</div>
<div class="divbox" arrow="top" style="border:1px solid red;width:500px;height:200px;background:#f7f7f7;position:absolute;top:100px;right:100px;">
<h3 style="height:30px;background:#181818;color:#fff;">22222222</h3>
上下移动 由arrow="top"控制
</div>
<div class="divbox" style="border:1px solid red;width:500px;height:200px;background:#f7f7f7;position:absolute;bottom:100px;left:100px;">
<h3 style="height:30px;background:#181818;color:#fff;">22222222</h3>
全局移动 没有arrow属性就没有限制
</div>
<div class="divbox" handle="" style="border:1px solid red;width:500px;height:200px;background:#f7f7f7;position:absolute;bottom:100px;right:100px;">
全局移动 没有h3标签 须要加入handle属性 假设为空则总体都能拖动
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="drag.js"></script>
<script type="text/javascript">
$(function(){
$('.divbox').WanglDrag({handle:'h3'});
});
</script>
</body>
</html>2、自己定义drag.js
/**
* @author:wangl
*/
(function($){
/**插件入口**/
$.fn.WanglDrag = function(options){
var z_index = 0;
this.each(function(){
//參数优先级从高到低 为： 属性參数 、 调用參数 、 默认參数
var opts = $.extend({},$.fn.WanglDrag.defaults,options,$.fn.WanglDrag.parseOptions(this));
alert(JSON.stringify(opts));
opts.box = $(this);
init(opts);
});
};
var z_index = -1;
/**初始化**/
function init(opts){
var $box = opts.box,
x = 0,
y = 0,
left = 0,
top = 0,
b_width = $(document).width(),
b_height = $(document).height(),
maxWidth = b_width - $box.outerWidth(),
maxHeight = b_height - $box.outerHeight();
$handle = opts.handle ? $box.find(opts.handle) : $box;
$handle.css("cursor",'move');
$box.on('mousemove',function(e){
$box.css({"z-index":z_index++});
});
$handle.on('mousedown',function(e){
x = e.clientX;
y = e.clientY;
var $this = $(this);
var offset = $(this).offset();
left = offset.left;
top = offset.top;
var isDrag = true;
//alert('x:'+x+',y:'+y+',left:'+left+',top:'+top);
$(document).on('mousemove',function(e){
if(isDrag){
var new_left = left + e.clientX - x;
var new_top = top + e.clientY - y;
if(opts.arrow && opts.arrow=="top")new_left=left;//控制垂直方向
if(opts.arrow && opts.arrow=="left")new_top=top;//控制水平方向
if(new_left<=0)new_left = 2;
if(new_top<=0)new_top = 2;
if(new_left >= maxWidth)new_left = maxWidth;
if(new_top >= maxHeight)new_top = maxHeight;
$box.css({"top":new_top,"left":new_left});
}
}).on('mouseup',function(){
isDrag = false;
});
});
};
/**默认參数*/
$.fn.WanglDrag.defaults = {
handle : "",
arrow : ""
}
/**属性參数*/
$.fn.WanglDrag.parseOptions = function(target){
var $target = $(target);
return {
handle : $target.attr('handle'),
arrow : $target.attr('arrow')
}
}
})(jQuery)
posted on 2017-05-13 14:11 gavanwanggw 阅读(160) 评论(0) 编辑 收藏 举报
