使用sortablejs要注意什么

這篇文章主要講解了“使用sortablejs要注意什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“使用sortablejs要注意什么”吧！

1. 這個(gè)方法很難找到啊，找了很久，還是同事提醒我的，一個(gè)人的力量太渺小了，哈哈，這個(gè)方法以及屬性是指當(dāng) 某一項(xiàng)溢出某個(gè)區(qū)域的時(shí)候，就會(huì)自動(dòng)刪除這一項(xiàng)，是以插件的形式展示的

2. 注意 group 參數(shù)中的 put 參數(shù)是可以為函數(shù)的，表示可以放置的意思

group: {

          name: 'shared',

          put: function(to, from, target) {

            for (let i = 0; i < to.el.childNodes.length; i++) {

              if (to.el.childNodes[i].dataset.value === target.dataset.value) {

                return false

              }

            }

            return true

          },

        },

3. sortablejs 的拖拽 new Sortble(el, {})，只能是在原本的區(qū)域中，超出這個(gè)區(qū)域貌似 onMove 事件會(huì)失效，沒(méi)法獲取到 evt.originalEvent.clientX, evt.originalEvent.clientY

4. 可能在拖拽項(xiàng)的時(shí)候，我們?cè)O(shè)置的 pull="clone" 這個(gè)配置選項(xiàng)會(huì)導(dǎo)致我們的原有拖拽項(xiàng)的事件會(huì)被影響到，導(dǎo)致點(diǎn)擊事件會(huì)失效問(wèn)題，這樣的問(wèn)題只能通過(guò)布局方式解決了，把那個(gè)需要點(diǎn)擊的分出來(lái)進(jìn)行多列布局

5. 之前 demo 的是采用直接拖拽放置的方式，是直接把 DOM 放進(jìn)某個(gè)區(qū)域的，現(xiàn)在由于設(shè)計(jì)稿變化，我們無(wú)法采用之前 demo 中的例子，只能重新思考采用別的方式，經(jīng)過(guò)我們的討論，以及我在實(shí)施的時(shí)候，發(fā)現(xiàn)我們必須把數(shù)據(jù)都定義在 data- 屬性里面，采用假的拖動(dòng)方式，然后獲取到 data- 屬性數(shù)據(jù)，存進(jìn)數(shù)組，再進(jìn)行渲染

6. 之前的 demo 中在拖拽項(xiàng)溢出某個(gè)區(qū)域的時(shí)候，是啟動(dòng)了 removeSpill 屬性，發(fā)現(xiàn)也是有很多問(wèn)題，這個(gè)屬性還必須結(jié)合 onSpill 方法，但是實(shí)在是太不靈活了，一旦 removeSpill 被禁用這個(gè) onSpill 方法就沒(méi)法使用了，所以經(jīng)過(guò)我的思考，我只能使用脫離原本的區(qū)域，left,top,right,bottom

7. 想要讓 element-ui 中 el-checkbox 組件觸發(fā)原生事件，獲取 event 事件對(duì)象，需要給 change事件加上 .native，否則無(wú)法獲取到 原生的 event 事件對(duì)象

感謝各位的閱讀，以上就是“使用sortablejs要注意什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)使用sortablejs要注意什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！