因為沒有時間研究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 此處...