成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

通過拖動(dòng)列表，重新獲取列表的排序

whinc / 1867人閱讀

摘要：文章首發(fā)在我的個(gè)人博客上有這樣一個(gè)列表需要拖動(dòng)列表，改變順序，并把新的順序保存下來傳給后端。實(shí)現(xiàn)實(shí)現(xiàn)方法如下是當(dāng)前元素下標(biāo)，是拖動(dòng)到的位置下標(biāo)。

文章首發(fā)在我的 個(gè)人博客上

有這樣一個(gè)列表：

需要拖動(dòng)列表，改變順序，并把新的順序保存下來傳給后端。

實(shí)現(xiàn)實(shí)現(xiàn)方法如下：

function arrSort(arr,oldIndex,newIndex){
  //  oldIndex是當(dāng)前元素下標(biāo)，newIndex是拖動(dòng)到的位置下標(biāo)。

  //如果當(dāng)前元素在拖動(dòng)目標(biāo)位置的下方(即把該元素向上拖)，
  //先給數(shù)組中元素拖動(dòng)到的地方（即索引為newIndex的位置）新增一個(gè)和當(dāng)前拖動(dòng)元素值一樣的元素，
  //然后再把數(shù)組中之前的那個(gè)拖動(dòng)的元素刪除掉，因?yàn)榍懊娌迦肓艘粋€(gè)元素，所以數(shù)組長度要+1
  if(oldIndex > newIndex){
    arr.splice(newIndex,0,arr[oldIndex]);
    arr.splice(oldIndex+1,1)
  } else {
  //如果當(dāng)前元素在拖動(dòng)目標(biāo)位置的上方(即把該元素向下拖)，
  //同樣，給數(shù)組newIndex+1的地方新增一個(gè)和當(dāng)前元素值一樣的元素，
  //這時(shí)，將之前的那個(gè)拖動(dòng)的元素刪除掉，索引不變，還是oldIndex
    arr.splice(newIndex+1,0,arr[oldIndex]);
    arr.splice(oldIndex,1)
  }
}

最終總結(jié)就一句話：先在新的位置添加一個(gè)元素，然后再把原來的元素刪掉！

至于如何獲得 ==newIndex== 和 ==oldIndex== ？

我們項(xiàng)目使用的vue，這個(gè)拖拽用的一個(gè)庫：Vue.Draggable，

通過這個(gè)組件提供的方法，就能同時(shí)獲取newIndex和oldIndex；

其他方法：++拖拽前、后 都遍歷下這個(gè)列表，應(yīng)該也能拿到列表中元素的排序++（該方法未嘗試）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104703.html

相關(guān)文章

  • 拖放排序插件Sortable.js

    摘要：介紹是一款輕量級(jí)的拖放排序列表的插件雖然體積小，但是功能很強(qiáng)大下載地址官方特點(diǎn)支持觸屏設(shè)備和大部分瀏覽器以下的就不支持了，原因都懂得可以從一個(gè)列表容器中拖拽一個(gè)列表單元到其他容器或本列表容器中進(jìn)行排序移動(dòng)列表單元時(shí)有動(dòng)畫支持拖放操作和可選擇 介紹 Sortable.js是一款輕量級(jí)的拖放排序列表的js插件（雖然體積小，但是功能很強(qiáng)大）下載地址：https://github.com/Ru...

    tomorrowwu 評(píng)論0 收藏0

  • 用兩種不同的姿勢(shì)來實(shí)現(xiàn)拖動(dòng)排序

    摘要：前言魯迅說過如果你的技術(shù)不好，那么你的姿勢(shì)要多。元素不是被拖動(dòng)目標(biāo)時(shí)。先實(shí)現(xiàn)拖動(dòng)的效果，大概就是這樣在的時(shí)候記下必要的信息將小強(qiáng)的改成在記錄下鼠標(biāo)在軸上移動(dòng)的距離，橫行的話就是這樣基本的拖動(dòng)問題是解決了，元素最起碼是可以拖動(dòng)起來了。 前言 魯迅說過：如果你的技術(shù)不好，那么你的姿勢(shì)要多。 showImg(https://segmentfault.com/img/bVZSnT?w=500&...

    paney129 評(píng)論0 收藏0

  • 用兩種不同的姿勢(shì)來實(shí)現(xiàn)拖動(dòng)排序

    摘要：前言魯迅說過如果你的技術(shù)不好，那么你的姿勢(shì)要多。元素不是被拖動(dòng)目標(biāo)時(shí)。先實(shí)現(xiàn)拖動(dòng)的效果，大概就是這樣在的時(shí)候記下必要的信息將小強(qiáng)的改成在記錄下鼠標(biāo)在軸上移動(dòng)的距離，橫行的話就是這樣基本的拖動(dòng)問題是解決了，元素最起碼是可以拖動(dòng)起來了。 前言 魯迅說過：如果你的技術(shù)不好，那么你的姿勢(shì)要多。 showImg(https://segmentfault.com/img/bVZSnT?w=500&...

    zsy888 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<