Vue案例之拖拽

ゝ一世哀愁。 2023-06-07 10:47 26阅读 0赞

Vue拖拽

![在这里插入图片描述][20191014152730234.gif]  
HTML

<div id="box">                                                       HTML
        位置
        <br>x:{ { val.x}} <br>y:{ { val.y}}
        <div v-drag="greet" id="drag" :style="style">
        //注意这里要通过指令绑定函数将当前元素的位置数据传出来
        </div>
    </div>

Vue.directive('drag',//自定义指令 JS
            { bind:function (el, binding) { 
                    let oDiv = el;   //当前元素
                    let self = this;  //上下文
                    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';
                             //将此时的位置传出去
                            binding.value({ x:e.pageX,y:e.pageY})
                        };
                        document.onmouseup = function (e) { 
                        
                            document.onmousemove = null;
                            document.onmouseup = null;
                         };
                    };
                }
            }
        );
        window.onload = function () { 
            let vm = new Vue({ 
                el: '#box',
                data: { 
                    val: '123',
                    style: { 
                        width: '100px',
                        height: '100px',
                        background: 'aqua',
                        position: 'absolute',
                        right: '30px',
                        top: 0
                    }
                },
                methods:{ 
                //接受传来的位置数据，并将数据绑定给data下的val
                    greet(val){ 
                        vm.val = val;
                    }
                } ,
          });
        }

[20191014152730234.gif]: /images/20230601/6990cf3e283644cfa5630d2fbb75c94b.png