正巧在之前面試中遇到問實現(xiàn)拖拽效果

創(chuàng)新互聯(lián)公司是專業(yè)的南陵網(wǎng)站建設(shè)公司，南陵接單;提供網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行南陵網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

當時面試的時候簡單回答了實現(xiàn)的方式與邏輯。

現(xiàn)在閑來無事，把這個東西實現(xiàn)了一下。

原理很簡單，寫的很方便。

數(shù)據(jù)驅(qū)動，建立一個數(shù)組，數(shù)組初始長度為1

拖動觸發(fā)時，添加一個對象到數(shù)組中，拖動的是下標為0的對象，新建的還在原來位置放著，等待下次拖動。

話不多說，上代碼

一個簡單的demo，后續(xù)用的話可以再豐富，比如以拖動長度來觸發(fā)事件。

input可以換成子組件。這里提供分享一個底層的實現(xiàn)方式

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。