拖拽

基本拖拽

 

1
2
3
4
5
6
7
8
9
new Dragdrop({
    target 拖拽元素 HTMLElemnt 必选
    bridge 指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到
    dragable 是否可拖拽 (true)默认
    dragX true/false false水平方向不可拖拽 (true)默认
    dragY true/false false垂直方向不可拖拽 (true)默认
    area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动
    callback 拖拽过程中的回调函数
});

 

jQuery插件

+ View Code

 

拖拽示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
            left: 500px;
            top: 200px;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
<script>
    const div1 = document.getElementById('div1')
    const div2=document.getElementById('div2')

    function crash(obj1,obj2) {
        if(obj1.offsetLeft+obj1.offsetWidth<obj2.offsetLeft||
            obj2.offsetLeft+obj2.offsetWidth<obj1.offsetLeft||
            obj1.offsetTop+obj1.offsetHeight<obj2.offsetTop||
            obj2.offsetTop+obj2.offsetHeight<obj1.offsetTop)
            return false
        return true
    }
    function move(obj) {
        obj.onmousedown = function (event) {
            const chaX = event.clientX - obj.offsetLeft
            const chaY = event.clientY - obj.offsetTop
            document.onmousemove = function (event) {
                obj.style.left = event.clientX - chaX + 'px'
                obj.style.top = event.clientY - chaY + 'px'
                console.log(crash(div1,div2))
            }
            document.onmouseup = function () {
                document.onmousemove = null
            }
        }
    }
    move(div1)
    move(div2)
</script>
posted @ 2021-12-14 09:22  赴人间惊鸿艳  阅读(186)  评论(0)    收藏  举报