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>

 

js 拖动功能组件,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。