zoukankan      html  css  js  c++  java
  • 用vue的自定义组件写了一个拖拽 组件,局部的 只能在自定义元素内的


    简单实现 没有做兼容
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> <drag></drag> </div> <template id="drag"> <div :style="json" @mousedown="move($event)"></div> </template> <script src="lib/bower_components/vue/dist/vue.js"></script> <script> new Vue({ el:"#box", //Vue对象作用的范围 components:{ 'drag':{ //drag标签 data:function(){ return { json:{"100px",height:"100px", background:"red",position:"absolute" } } }, methods:{ move:function(el){ var obj=this.$el; var disX=el.clientX-obj.offsetLeft; var disY=el.clientY-obj.offsetTop; document.onmousemove=function(el){ var left=el.clientX-disX; var top=el.clientY-disY; obj.style.left=left+"px"; obj.style.top=top+"px"; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } return false; } return false; } }, template:"#drag" } } }); </script> </body> </html>
  • 相关阅读:
    算法——基础
    递归函数
    docker常用命令
    vue——计算属性和侦听器
    vue——指令系统
    vue——介绍和使用
    webpack、babel模块、模块化
    Nodejs介绍及npm工具使用
    ECMAScript 6简介
    easyui(入门)
  • 原文地址:https://www.cnblogs.com/liveoutfun/p/9752308.html
Copyright © 2011-2022 走看看