vue第四天

genefy 发布于2019-08-20 14:44 / 287人阅读

摘要：这次是利用的自定义指令实现方块拖拽指令名称参数原生元素拖拽元素中包括和结构

这次是利用vue的自定义指令实现方块拖拽

Vue.directive(指令名称,function(参数){
       this.el    -> 原生DOM元素
    });

拖拽：元素onmousedown中包括document.onmousemove和document.onmouseup

结构：

script：

Vue.directive("drag",function(){
           var oDiv=this.el;
           oDiv.onmousedown=function(ev){
               var x=ev.pageX-oDiv.offsetLeft;
               var y=ev.pageY-oDiv.offsetTop;
               document.onmousemove=function(ev){
                   var l=ev.pageX-x;
                   var t=ev.pageY-y;
                   oDiv.style.left=l+"px";
                   oDiv.style.top=t+"px";
               }
               document.onmouseup=function () {
                   document.onmousemove=null;
                   document.onmouseup=null;
               }
           }

       })
        window.onload=function(){
            var vm=new Vue({
                data:{

                }
            }).$mount("#box")
        }

服务器托管云服务器第四天第十四天四天十四天

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81874.html

第四天

摘要：三个小时今天学到了什么背景边框列表链接今天遇到了什么问题好多概念其实搞不太懂。比如继承，伪元素。 2019.3.9 三个小时今天学到了什么？背景边框列表链接今天遇到了什么问题好多概念其实搞不太懂。比如继承，伪元素。笔记第四天

DobbyKim 2019-08-30 15:56 评论0 收藏0
九天学会Java，第四天，循环结构

摘要：变量和数据类型，赋值和输出算术运算选择结构循环结构函数定义，函数调用变量作用域栈，程序运行的基石面向对象异常处理语言提供的公用包这次我们讲的循环结构。循环结构在编程中广泛使用，所以一定要了解好循环结构是怎么用的。正确的写法，是用循环结构。变量和数据类型，赋值和输出算术运算选择结构循环结构函数定义，函数调用变量作用域栈，程序运行的基石面向对象异常处理语言提供的公用包...

Youngs 2019-08-16 10:42 评论0 收藏0
第四天-《企业应用架构模式》-WEB表现层

构建web服务器上应用程序的2种方法： 1）使用脚本： CGI、Java Servlet，通过write stream操作输出字符串；适合于解释请求消息 2）使用服务器页面：把程序和返回文本也组合在一起，在html中编写返回页面（Asp、php、jsp等）；适合于格式化应答消息 1. 视图模式： 1）转换视图：特点：使用程序的一种转换风格（如XSLT) 2）模板视图：特点：允许你在网页结构...

antyiwei 2019-07-01 11:16 评论0 收藏0
26天学通前端开发（配资料）

摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。前言好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。网上有很多前端的学习路径文章，大多是知...

blair 2019-08-21 16:59 评论0 收藏0
第十四天-企业应用架构模式-Web表现模式

摘要：模型视图控制器页面控制器前端控制器模板试图转换试图两步试图应用控制器模型－视图－控制器（Ｍｏｄｅｌ　Ｖｉｅｗ　Ｃｏｎｔｒｏｌｌｅｒ）页面控制器（Page Controller）前端控制器(Front Controller) 模板试图（Template View）转换试图（Transform View）两步试图（Two Step View）应用控制器（Appliacction...

mmy123456 2019-07-01 11:21 评论0 收藏0