vue第四天

genefy 發布于2019-08-20 14:44 / 445人閱讀

摘要：這次是利用的自定義指令實現方塊拖拽指令名稱參數原生元素拖拽元素中包括和結構

這次是利用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")
        }

GPU云服務器云服務器第四天第十四天四天十四天

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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