<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>自定義指令--拖拽</title></head><body><div id="app"><div v-drag :style="{background:'red', width:'200px',height:'200px',position:'absolute',left:0,top:0}"></div></div></body><script src="https://unpkg.com/vue/dist/vue.js"></script><script>var vm= new Vue({el:'#app',data:{}})Vue.directive('drag', function(){var oDiv = this.el;oDiv.onmousedown=function(ev){var disX = ev.clientX-oDiv.offsetLeft;var disY = ev.clientY-oDiv.offsetTop;document.onmousemove = function(ev){var l = ev.clientX-disX;var t = ev.clientY-disY;oDiv.style.left =l+'px';oDiv.style.top =t+'px';};document.onmouseup=function(){document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;}}}})</script></html>
添加回答
舉報
0/150
提交
取消