vue封裝元素拖拽指令

2021-10-12 08:59:58 字數 692 閱讀 2238

/**

* 用於實現元素拖拽 drag.ts

*/export default ;

// 滑鼠移動

window.onmousemove = function(e: any)

const nx = e.clientx;

const ny = e.clienty;

// 計算移動後的左偏移量和頂部的偏移量:

// 如果將滑鼠移動後位置直接給元素定位,會將元素左頂點與滑鼠對齊,所以我們要減掉(x-l)來優化位移

const nl = nx - (x - l);

const nt = ny - (y - t);

el.style.left = nl + 'px';

el.style.top = nt + 'px';

};// 滑鼠抬起事件

el.onmouseup = function() ;

}};

使用時引入我們的指令檔案,註冊指令即可

VUE 元素拖拽 移動

使用範圍 兩個元素位置交換,移動元素到指定位置 屬性解釋 draggable 是否允許元素進行拖拽 dragstart 拖拽開始觸發的函式,可在此獲取元素 dragover 在目標元素內進行拖動時觸發的函式 dragenter 當拖拽進入目標元素時出發的函式 dragend 拖拽結束 快速熟悉上邊 ...

封裝vue指令

指令的定義一定要放到 new vue 之前,否則報錯並且無效 在註冊指令的時候,不需要加上v 這個字首 在dom元素上使用的時候,必須加上v 字首 乙個指令定義物件可以提供如下幾個鉤子函式 均為可選 bind 只呼叫一次,指令第一次繫結到元素時呼叫,在這裡可以進行一次初始化設定 inserted 被...

Vue封裝常用指令Directive

需求 只能輸入數字 輸入字母和特殊字元自動過濾掉 輸入完成失焦自動加.00 如果輸入了小數自動四捨五入為22.22類似這樣格式 將數值四捨五入後格式化.param num 數值 number或者string param cent 要保留的小數字 number param isthousand 是否需...