js 拖动功能组件

2022-07-09 10:42:28

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 拖动功能组件,布布扣,bubuko.com

js 拖动功能组件

码农公寓

相关文章