美文网首页
vue中实现div自由拖拽

vue中实现div自由拖拽

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-03-18 13:16 被阅读0次
    <template>
        <div class="contanier" v-drag >
            <!-- <div class="drag-item"></div> -->
        </div>
    </template>
    <script>
     
    export default {
        data() {
            return {
     
            }
        },
     
        // 自定义指令 —— 拖动div
        directives: {
            drag(el) {
                let oDiv = el // 当前元素
                // let self = this // 上下文
                // 禁止选择网页上的文字
                document.onselectstart = function () {
                    return false
                }
                oDiv.onmousedown = function (e) {
                    // 鼠标按下,计算当前元素距离可视区的距离
                    let disX = e.clientX - oDiv.offsetLeft
                    let disY = e.clientY - oDiv.offsetTop
                    document.onmousemove = function (e) {
                        // 通过事件委托,计算移动的距离
                        let l = e.clientX - disX
                        let t = e.clientY - disY
                        // 移动当前元素
                        oDiv.style.left = l + 'px'
                        oDiv.style.top = t + 'px'
                    }
                    document.onmouseup = function (e) {
                        document.onmousemove = null
                        document.onmouseup = null
                    }
                    // return false不加的话可能导致黏连,就是拖到一个地方时div粘在鼠标上不下来,相当于onmouseup失效
                    return false
                }
            }
        },
     
    }
    </script>
     
    <style scoped lang="scss">
    .contanier {
        position:absolute;
        top:100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background: red;
        border-radius: 5px;
        box-shadow: 0 4px 12px rgba(0,0,0,.15);
      
    }
    </style>
    

    相关文章

      网友评论

          本文标题:vue中实现div自由拖拽

          本文链接:https://www.haomeiwen.com/subject/kgwfrdtx.html