jquery drag组件 jquery拖拽组件

最新推荐文章于 2023-07-30 10:00:32 发布

人迹板桥霜

最新推荐文章于 2023-07-30 10:00:32 发布

阅读量794

点赞数

分类专栏： javascript 文章标签： jquery drag 拖拽移动

本文链接：https://blog.csdn.net/liuwanli906413/article/details/44061865

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在网上找了很久想找一个jquery的拖拽组件没找到合适的最后还是自己动手写一个封装query的拖拽组件自己导入jQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn">
<head>
<title>测试选择地区</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="plarform.css" rel="stylesheet" type="text/css" media="screen" />

<script src="../jquery/jquery-1.7.2.js"></script>
<script src="jquery.plarform.js"></script>

<script>
function DragDiv(){
this.horizontal = false;
this.vertical = false;

}

/**
* drag组件
*/
(function($){
function init(target){
var $target = $(target);
var opts = $target.data('drag').options;
//如果没有句柄则默认当前拖拽的框为句柄
if(!opts.handle){
opts.handle = $target;
}else{
if(typeof opts.handle == 'string'){
opts.handle = $(opts.handle, $target);
}
}
opts.handle.css({cursor:'move'}); //设置句柄为十字箭头光标。用于标示对象可被移动
opts.window.bind('mousedown',function(e){
e = fixEvent(target, e);
opts.lastMouseX=e.pageX;
opts.lastMouseY=e.pageY;
opts.window.bind('mousemove',function(e){
drag(target, e);
e.preventDefault();
}).mouseup('mouseup',function(e){
end(target, e);
e.preventDefault();
});
});
};

/**
* 拖拽开始
*/
function drag(target, e){
e = fixEvent(target, e);
var $target = $(target);
var opts = $target.data('drag').options;
var mouseY=e.pageY;
var mouseX=e.pageX;
var top=parseInt($target.offset().top);
var left=parseInt($target.offset().left);

//作用是将所有鼠标事件捕获到handle对象，对于firefox，以用preventDefault来取消事件的默认动作：
if(document.all){
opts.handle[0].setCapture();
}else{
e.preventDefault();
};
var currentLeft,currentTop;
currentLeft=left+mouseX-opts.lastMouseX;
currentTop=top+(mouseY-opts.lastMouseY);

//判断是否规定活动区域
var x0 = opts.x0;
var y0 = opts.y0;
var x1 = opts.x0;
var y1 = opts.y0;
if(typeof opts.windowArea == 'object'){
var $w = opts.windowArea;
x0 = opts.windowArea.offset().left;
y0 = opts.windowArea.offset().top;
x1 = x0 + opts.windowArea.width() - $target.width();
y1 = y0 + opts.windowArea.height() - $target.height();
}
if(x0){
currentLeft = currentLeft <= x0 ? x0 :currentLeft;
}
if(x1){
currentLeft = currentLeft >= x1 ? x1 :currentLeft;
}
if(y0){
currentTop = currentTop <= y0 ? y0 :currentTop;
}
if(y1){
currentTop = currentTop >= y1 ? y1 :currentTop;
}
var coord = {};
if(opts.v){ //只能垂直拖拽
coord = {'top':currentTop+"px"};
}else if(opts.h){ //只能水平拖拽
coord = {'left':currentLeft +"px"};
}else{
coord = {'left':currentLeft +"px",'top':currentTop+"px"};
}
opts.onDrag.call(target, currentLeft, currentTop, e); //回调函数
$target.css(coord);
opts.lastMouseX=mouseX;
opts.lastMouseY=mouseY;
return false;
}
/**
* 停止
*/
function end(target, e){
var $target = $(target);
var opts = $target.data('drag').options;
if(document.all){opts.handle[0].releaseCapture();};//取消所有鼠标事件捕获到handle对象
opts.window.unbind("mousemove mouseup");
var top=parseInt($target.offset().top);
var left=parseInt($target.offset().left);
opts.onEnd.call(target, left, top, e); //回调函数
}
/**
* 重新组装e
*/
function fixEvent(target, e){
var $target = $(target);
var opts = $target.data('drag').options;
var sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
var st = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
if(typeof e=="undefined")e=window.event;
if(typeof e.layerX=="undefined")e.layerX=e.offsetX;
if(typeof e.layerY=="undefined")e.layerY=e.offsetY;
if(typeof e.pageX == "undefined")e.pageX = e.clientX + sl - document.body.clientLeft;
if(typeof e.pageY == "undefined")e.pageY = e.clientY + st - document.body.clientTop;
return e;
}

$.fn.drag = function(options, params){
if(opts.windowArea && typeof options == 'string'){
return $.fn.drag.methods[options](this,params);
}
options : options || {};
return this.each(function(){
var state = $.data(this, 'drag');
if(state){
$.extend(state.options, options);
}else{
$.data(this, 'drag', {options:$.extend({}, $.fn.drag.defaults, options)});
init(this);
}
});
};

$.fn.drag.methods = {
};

$.fn.drag.defaults = {
handle:'', //推拽句柄默认以当前对象为句柄
window:$(document), //事件有效区域
windowArea:null, //活动局域设置后将覆盖自定义的x0,x1,y0,y1设置的限制区域
x0:null,
x1:null,
y0:null,
y1:null,
v:false, //只能垂直拖拽
h:false, //只能水平拖拽
onDrag:function(left,top, e){}, //拖拽中回调函数
onEnd:function(left,top, e){} //拖拽结束回调函数
};
})(jQuery);

//var Drag

$(function(){
//Drag.init(document.getElementById('select1'),document.getElementById('select'));

$('#select').drag({windowArea:$('#window'),v:false,
handle:'#select1',
onDrag:function(left,top, e){
$('#test').html('left:'+left+'--------top:'+top);
},
onEnd:function(left,top, e){
$('#test1').html('left:'+left+'--------top:'+top);
}

})
});

</script>
<style>

</style>
</head>
<body>
<div >
</div>
Drag :<div id="test"></div>
End :<div id="test1"></div>
<div style="width:1200px;border:1px solid #ff0000;height:800px;" id="window">
<div style="width:500px;border:1px solid #005AA0;height:80px;position: absolute;" id="select">
<div id="select1" style="width:498px;height:30px;border:1px solid #005AA0;" id="select1"> 1
</div>
</div>1</br>

</div>

</body>
</html>

人迹板桥霜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery drag组件 jquery拖拽组件

在网上找了很久想找一个jquery的拖拽组件没找到合适的最后还是自己动手写一个封装query的拖拽组件自己导入jQuery 测试选择地区 function DragDiv(){this.horizontal = false;this.vertical = false;
复制链接

扫一扫