js 拖动功能组件
1.基于jquery
2.效率优先
3.可配置项(拖动者,鼠标样式,拖动范围)
欢迎PK效率!!
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>title</title> <link href="css/main.css"/> <style type="text/css"> .container{ width:500px; height:500px; border:2px solid #ccc; margin:100px auto; } .main{ position:absolute; top:50px; left:200px; } .test{ position:absolute; width:200px; height:200px; border:1px solid #ccc; background:#efefef; top:10px; left:10px; } .drag{ background:#ff0000; color:#fff; width:100%; } </style> </head> <body> <div class="container"> <div class="main"> <div class="main"> <div class="test"> <div class="drag">fjsdkljf</div> fjsdklfjklsd <br> <br>fdsjkfsdjkl </div> </div> </div> jfklsdjkfjklsdjfkljsdkl<br> jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br> </div> <script src="/test/common/jquery.js"></script> <script src="/test/common/base.js"></script> <script> (function($){
var Dragdrop = DH.Base.create({
init : function(){
this.begin = {};
this.canDrag = false;
this.$drag = this.options.dragSelector ? this.el.find(this.options.dragSelector) : this.el; // 拖动元素
this.$scope = this.options.scopeSelector && $(this.options.scopeSelector); // 拖动范围
this.$move = this.el; // 移动元素
this.cursor = this.options.cursor || ‘move‘; // 鼠标样式
this.dragFn = this.proxy(this.drag);
this.resetFn = this.proxy(this.reset);
this.$drag.bind(‘mousedown‘, this.dragFn);
$(window).bind(‘resize‘, this.resetFn);
this.reset();
},
reset : function(){
if(this.$scope){
var $move = this.$move,
$scope = this.$scope,
minLeft = 0,
maxLeft = $move.width(),
minTop = 0,
maxTop = $move.height(),
offset = $move.offset(),
oleft = offset.left,
otop =
offset.top,
position = $move.position(),
pleft = position.left,
ptop = position.top,
eleft = parseFloat($move.css(‘left‘)),
etop = parseFloat($move.css(‘top‘)),
scopeOffset =
$scope.position(),
scopeLeft = scopeOffset.left,
scopeTop = scopeOffset.top,
scopeWith =
$scope.width(),
scopeHeight = $scope.height(),
width = $move.width(),
height =
$move.height()
;
if(parseFloat($scope.css(‘marginLeft‘)) > 0){
scopeLeft += parseFloat($scope.css(‘marginLeft‘));
}
if(parseFloat($scope.css(‘marginTop‘)) > 0){
scopeTop += parseFloat($scope.css(‘marginTop‘));
}
minLeft = scopeLeft - (oleft - pleft);
maxLeft = scopeLeft - (oleft - pleft) + scopeWith - width;
minTop = scopeTop - (otop - ptop);
maxTop = scopeTop - (otop - ptop) + scopeHeight - height;
this.defaults = {
minLeft : minLeft,
maxLeft : maxLeft,
minTop : minTop,
maxTop : maxTop
}
}
},
drag : function(e){
var $move = this.$move,
$drag = this.$drag,
$scope = this.$scope,
pageX = e.pageX,
pageY = e.pageY,
left =
parseFloat($move.css(‘left‘)),
top =
parseFloat($move.css(‘top‘))
;
isNaN(left) && (left = 0); // fixed ie
isNaN(top) && (top = 0); // fixed ie
this.begin = {
left : pageX - left,
top : pageY - top
};
$drag.css(‘cursor‘, this.cursor);
$move.css(‘-moz-user-select‘, ‘none‘); // stop moz text select
this.moveFn = this.proxy(this.move);
this.stopFn =
this.proxy(this.stop);
$(document)
.bind(‘mousemove‘, this.moveFn)
.bind(‘mouseup‘, this.stopFn)
.bind(‘selectstart‘,
this.stopBubble); // stop ie text select
;
this.canDrag = true;
},
move : function(e){
if(!this.canDrag) return;
var $move = this.$move,
$scope = this.$scope,
pageX = e.pageX,
pageY = e.pageY,
begin = this.begin,
left = pageX - begin.left,
top = pageY - begin.top
;
if(this.defaults){
var defaults = this.defaults;
if(left < defaults.minLeft){
left =
defaults.minLeft;
}else if(left > defaults.maxLeft){
left = defaults.maxLeft;
}
if(top < defaults.minTop){
top =
defaults.minTop;
}else if(top > defaults.maxTop){
top = defaults.maxTop;
}
}
$move
.css({
left : left,
top : top
});
},
stop : function(){
this.$drag.css(‘cursor‘,
‘‘);
this.$move.css(‘-moz-user-select‘, ‘‘);
$(document)
.unbind(‘mousemove‘, this.moveFn)
.unbind(‘mouseup‘, this.stopFn)
.unbind(‘selectstart‘,
this.stopBubble);
;
this.canDrag = false;
},
stopBubble: function(){
return false;
},
destory : function(){
this.stop();
this.$drag.unbind(‘mousedown‘,
this.dragFn);
$(window).unbind(‘resize‘, this.resetFn);
this.$drag = null;
this.$move = null;
this.$scope = null;
this.begin = null;
this.defaults = null;
}
});
new Dragdrop({ el : ‘.test‘, cursor : ‘pointer‘, dragSelector : ‘.drag‘, scopeSelector : ‘.container‘ }); })(window.jQuery); </script> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。