jQuery拖拽--1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.2.5.js"></script>
    <script src="vue/jQuery.js"></script>
    <style>
        .box{
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow: hidden;
            margin: 100px;
        }
        .son{
            position: absolute;
            width: 1000px;
            height: 1000px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="son">

    </div>
</div>

<script>
    function dragEle(){
        //原理，点击元素，获取源位置，移动鼠标，获取目标位置，鼠标移动多少元素移动多少
        var sourcePos = {left:0,top:0};
        var targetPos = {left:0,top:0};
        var elePos = {left:0,top:0};
        //元素宽高为了碰撞检测
        var box = {height:$('.box').height(),width:$('.box').width()};
        var son = {height:0,width:0};
        $('.son').mousedown(function(event){
            elePos.left = $('.son').position().left;
            elePos.top = $('.son').position().top;
            sourcePos.left=event.pageX;
            sourcePos.top=event.pageY;
            son.width = $('.son').width();
            son.height = $('.son').height();
            $(document).mousemove(function(event){
                targetPos.left = event.pageX;
                targetPos.top = event.pageY;
                //这个elePos为元素位置，点击时获取
                var left = elePos.left + targetPos.left - sourcePos.left;
                var top = elePos.top + targetPos.top - sourcePos.top;
                //碰撞检测
                if(left>0){
                    left = 0;
                }
                if(top>0){
                    top = 0;
                }
                if(left<box.width-son.width){
                    left = box.width-son.width;
                }
                if(top<box.height-son.height){
                    top = box.height-son.height;
                }
                $('.son').css({
                    left: left + 'px',
                    top: top + 'px'
                })
            });
        });
        $('.son').mouseup(function(){
            $(document).off('mousemove');
        });
    }
    dragEle();
</script>
</body>
</html>

稍微改动下，就可以放在其它地方用了

function dragEle(opt){
    //可以来点判断，当调用这个函数时输入参数错误时提示
    if(!opt.dragEle){
        console.log('要拖拽的元素是哪个');
    }
    var dragEle = opt.dragEle;
    var dragWrap = opt.dragWrap;

    //原理，点击元素，获取源位置，移动鼠标，获取目标位置，鼠标移动多少元素移动多少
    var sourcePos = {left:0,top:0};
    var targetPos = {left:0,top:0};
    var elePos = {left:0,top:0};
    //元素宽高为了碰撞检测
    var box = {height:dragWrap.height(),width:dragWrap.width()};
    var son = {height:0,width:0};
    dragEle.mousedown(function(event){
        elePos.left = dragEle.position().left;
        elePos.top = dragEle.position().top;
        sourcePos.left=event.pageX;
        sourcePos.top=event.pageY;
        son.width = dragEle.width();
        son.height = dragEle.height();
        $(document).mousemove(function(event){
            targetPos.left = event.pageX;
            targetPos.top = event.pageY;
            //这个elePos为元素位置，点击时获取
            var left = elePos.left + targetPos.left - sourcePos.left;
            var top = elePos.top + targetPos.top - sourcePos.top;
            //碰撞检测
            if(left>0){
                left = 0;
            }
            if(top>0){
                top = 0;
            }
            if(left<box.width-son.width){
                left = box.width-son.width;
            }
            if(top<box.height-son.height){
                top = box.height-son.height;
            }
            dragEle.css({
                left: left + 'px',
                top: top + 'px'
            })
        });
    });
    dragEle.mouseup(function(){
        $(document).off('mousemove');
    });
}
dragEle({
    dragEle: $('.son'),
    dragWrap: $('box')
});

猜你喜欢