zoukankan      html  css  js  c++  java
  • vue自定义指令:v-drag使用 拖动拖拽

    <template>
        <div class="drag">
           <div ref="element" class="content" v-drag draggable="false">
              <p>文字网页</p>
           </div>
           <div style="height:2000px;100%"></div>
        </div>
    </template>
    <script >
       export default {
            data(){
                return {
                    dd:"",
                    inout:""
                }
            },
            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>
    .drag{
        position: relative;
    }
    /* position:absolute;这个还是要设的,不然拖动块定不了位置 */
    .content{
        position:absolute;
        height:100px;
        100px;
        background-color: #67C23A;
        cursor: pointer;
    }
    </style>
  • 相关阅读:
    关于登录或授权页面的错误提示
    弱网环境模拟工具
    Android Fragment 深度解析
    排序算法(七)
    排序算法(六)
    排序算法(五)
    java之数组
    排序算法(四)
    排序算法(三)
    排序算法(二)
  • 原文地址:https://www.cnblogs.com/shiyiersan/p/13917726.html
Copyright © 2011-2022 走看看