在Vue里我们除了可以使用Vue官方给我们定义好的指令外&＃xff0c;也可以自己来封装指令。
<html>
<head><title>title><script src&＃61;"https://cdn.bootcss.com/vue/2.5.17/vue.js">script><style type&＃61;"text/css">.drag {position: absolute;left: 0px;top: 0px;width: 100px;height: 100px;background: red;}style>
head>
<body><div id&＃61;"root"><div class&＃61;"drag" v-drag>div><div class&＃61;"drag" v-drag>div><div class&＃61;"drag" v-drag>div>div> p><script type&＃61;"text/Javascript">var vm &＃61; new Vue({el: &＃39;#root&＃39;,data: {a: 1,b: 2},methods: {},directives: {drag(el){el.onmousedown &＃61; function(e){var disx &＃61; e.pageX - el.offsetLeft;var disy &＃61; e.pageY - el.offsetTop;document.onmousemove &＃61; function(e) {el.style.left &＃61; e.pageX - disx &＃43; &＃39;px&＃39;;el.style.top &＃61; e.pageY - disy &＃43; &＃39;px&＃39;;}document.onmouseup &＃61; function(e) {document.onmousemove &＃61; document.onmouseup &＃61; null;}}}}})script>body>
html>
![前端库Bootstrap框架：「11]使用 span 创建行内元素](https://img6.php1.cn/3cdc5/9921/243/17a6062cb49e163c.png)
京公网安备 11010802041100号