vue拖拽练习

来源：互联网发布：古鹰知乎编辑：程序博客网时间：2024/05/22 06:55
<html><head>    <title></title>    <meta charset="utf-8">    <script type="text/javascript" src="vue_2.js"></script></head><body>    <div id="box">    <-- 自定义指令 v-drag -->        <div v-drag :style="{position:'absolute',        width:'100px',        height:'100px',        background:'red'}"></div>        <div v-drag :style="{position:'absolute',        width:'100px',        height:'100px',        background:'blue'}"></div>    </div></body></html><script type="text/javascript">    // 自定义元素指令    Vue.directive('drag',function(){        var box = this.el;        box.onmousedown = function(ev){            var disX = ev.clientX - box.offsetLeft;            var disY = ev.clientY - box.offsetTop;            document.onmousemove = function(ev){                var l = ev.clientX - disX;                var t = ev.clientY - disY;                box.style.left = l + "px";                box.style.top = t + "px";            };            document.onmouseup = function(){                document.onmousemove = null;                document.onmouseup = null;            }        }    });    new Vue({    }).$mount("#box");</script>
阅读全文
0 0