vue下使用drag完成簡單拖拽

2022-06-19 13:57:15 字數 1304 閱讀 6762

因為沒有時間研究jquery的sortable功能(也沒有文件),所以用html5的drag完成了簡單的拖拽,這裡記錄下

`@dragstart` , `@dragover` , `@dragend` , `dragable`

dragable 確認可以被拖拽的元素

script內部**

/*

* * 拖拽開始

*/ondragstart(e) ,/**

* 拖拽過程

*/ondragover(e)

let targetindex = this.target.getattribute('index')

let dragingindex = this.draging.getattribute('index')

if(targetindex > dragingindex)

else

this._animation(targettop, this

.target)

this._animation(dragingtop, this

.draging)

}}, /**

* 拖拽結束

*/ondragend(e) )

this.options =data

this

.initoptions()

},/**

* 拖拽的動畫過程

*/_animation(clienttop, dom) px)`

//觸發重繪

'offsetwidth:', dom.offsetwidth)

//offsetwidth導致了瀏覽器重繪(了解瀏覽器重排、重繪)

dom.style.transition = 'transform 0.3s';

dom.style.transform = '';

cleartimeout(dom.animated);

dom.animated = settimeout(()=>,150)

},

這樣簡單的拖拽就完成了,在這裡要著重強調 `v-for` 的情況下,key值很重要,因為key值我給的是index值,發現每次排完序之後都是沒重新排序的樣子,犯了低階錯誤

key 為每個節點提供身份標識,資料改變時會重排,所以最好繫結唯一標識。

注意:如果用index標識可能得不到想要的效果,所以我在專案中使用了每個元素的value來作為 key

drag 簡單使用方法

document 被拖拽元素 var item document.getelementbyid item 拖拽開始是觸發的事件 item.addeventlistener dragstart function 拖拽結束時觸發的事件 item.addeventlistener dragend func...

簡單使用Vue

安裝node.js 1 cmd檢視是否安裝成功 npm version npm v檢視安裝路徑 注意 安裝node.js的目的是為了使用npm指令 安裝使用vue devtools 2 解壓 3 cmd進入解壓目錄 執行命令 npm install npm run build 這一步一定不要忘了,沒...

Vue簡單使用

vue是一種採用mvvm model view view model 架構的js框架 用於引用vue內對應key的屬性值 當 網路條件不佳時 可能導致瀏覽器看到源 即插值閃爍現象,此時可利用v text標籤代替 span 用於在非標籤屬性位置引用vue內屬性名為name的值 name span 此處...