vue第四天

genefy 發(fā)布于2019-08-20 14:44 / 468人閱讀

摘要：這次是利用的自定義指令實現(xiàn)方塊拖拽指令名稱參數(shù)原生元素拖拽元素中包括和結(jié)構(gòu)

這次是利用vue的自定義指令實現(xiàn)方塊拖拽

Vue.directive(指令名稱,function(參數(shù)){
       this.el    -> 原生DOM元素
    });

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

結(jié)構(gòu)：

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")
        }

云服務(wù)器 GPU云服務(wù)器第四天第十四天四天十四天

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81874.html

相關(guān)文章

第四天

摘要：三個小時今天學(xué)到了什么背景邊框列表鏈接今天遇到了什么問題好多概念其實搞不太懂。比如繼承，偽元素。 2019.3.9 三個小時今天學(xué)到了什么？背景邊框列表鏈接今天遇到了什么問題好多概念其實搞不太懂。比如繼承，偽元素。筆記第四天

DobbyKim 2019-08-30 15:56 評論0 收藏0
九天學(xué)會Java，第四天，循環(huán)結(jié)構(gòu)

摘要：變量和數(shù)據(jù)類型，賦值和輸出算術(shù)運算選擇結(jié)構(gòu)循環(huán)結(jié)構(gòu)函數(shù)定義，函數(shù)調(diào)用變量作用域棧，程序運行的基石面向?qū)ο螽惓Ｌ幚碚Z言提供的公用包這次我們講的循環(huán)結(jié)構(gòu)。循環(huán)結(jié)構(gòu)在編程中廣泛使用，所以一定要了解好循環(huán)結(jié)構(gòu)是怎么用的。正確的寫法，是用循環(huán)結(jié)構(gòu)。變量和數(shù)據(jù)類型，賦值和輸出算術(shù)運算選擇結(jié)構(gòu) 循環(huán)結(jié)構(gòu) 函數(shù)定義，函數(shù)調(diào)用變量作用域棧，程序運行的基石面向?qū)ο?異常處理語言提供的公用包...

Youngs 2019-08-16 10:42 評論0 收藏0
第四天-《企業(yè)應(yīng)用架構(gòu)模式》-WEB表現(xiàn)層

構(gòu)建web服務(wù)器上應(yīng)用程序的2種方法： 1）使用腳本： CGI、Java Servlet，通過write stream操作輸出字符串；適合于解釋請求消息 2）使用服務(wù)器頁面：把程序和返回文本也組合在一起，在html中編寫返回頁面（Asp、php、jsp等）；適合于格式化應(yīng)答消息 1. 視圖模式： 1）轉(zhuǎn)換視圖：特點：使用程序的一種轉(zhuǎn)換風(fēng)格（如XSLT) 2）模板視圖：特點：允許你在網(wǎng)頁結(jié)構(gòu)...

antyiwei 2019-07-01 11:16 評論0 收藏0
26天學(xué)通前端開發(fā)（配資料）

摘要：網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知識點羅列為主或是資料的匯總，數(shù)據(jù)量讓新人望而卻步。天了解一個前端框架。也可以關(guān)注微信公眾號曉舟報告，發(fā)送獲取資料，就能收到下載密碼，網(wǎng)盤地址在最下方，獲取教程和案例的資料。前言好的學(xué)習(xí)方法可以事半功倍，好的學(xué)習(xí)路徑可以指明前進方向。這篇文章不僅要寫學(xué)習(xí)路徑，還要寫學(xué)習(xí)方法，還要發(fā)資料，干貨滿滿，準(zhǔn)備接招。網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知...

blair 2019-08-21 16:59 評論0 收藏0
第十四天-企業(yè)應(yīng)用架構(gòu)模式-Web表現(xiàn)模式

摘要：模型視圖控制器頁面控制器前端控制器模板試圖轉(zhuǎn)換試圖兩步試圖應(yīng)用控制器模型－視圖－控制器（Ｍｏｄｅｌ?。郑椋澹鳌。茫铮睿簦颍铮欤欤澹颍?頁面控制器（Page Controller）前端控制器(Front Controller) 模板試圖（Template View）轉(zhuǎn)換試圖（Transform View）兩步試圖（Two Step View）應(yīng)用控制器（Appliacction...

mmy123456 2019-07-01 11:21 評論0 收藏0