|
| 1 | +const root = document.querySelector('.app') |
| 2 | +const ul = document.querySelector('ul') |
| 3 | +const dataList = ['11111', '22222', '33333', '44444', '55555'] |
| 4 | + |
| 5 | +dataList.forEach((item) => { |
| 6 | + const li = document.createElement('li') |
| 7 | + li.innerText = item |
| 8 | + li.draggable = true |
| 9 | + ul.appendChild(li) |
| 10 | +}) |
| 11 | + |
| 12 | +function throttle(func, delay) { |
| 13 | + let timeoutId |
| 14 | + let lastExecTime = 0 |
| 15 | + |
| 16 | + return function (...args) { |
| 17 | + const currentTime = Date.now() |
| 18 | + |
| 19 | + if (currentTime - lastExecTime > delay) { |
| 20 | + clearTimeout(timeoutId) |
| 21 | + lastExecTime = currentTime |
| 22 | + func.apply(this, args) |
| 23 | + } else { |
| 24 | + clearTimeout(timeoutId) |
| 25 | + timeoutId = setTimeout(() => { |
| 26 | + lastExecTime = currentTime |
| 27 | + func.apply(this, args) |
| 28 | + }, delay) |
| 29 | + } |
| 30 | + } |
| 31 | +} |
| 32 | +const hadnleOver = throttle((event) => { |
| 33 | + const targetLi = document.querySelector('.hidden-ul') |
| 34 | + const changelist = [...document.querySelectorAll('ul li:not(.hidden-ul)')] |
| 35 | + const ret = changelist.find((item) => { |
| 36 | + // console.log(item) |
| 37 | + if (event.clientY <= item.offsetTop + item.offsetHeight / 2) { |
| 38 | + return item |
| 39 | + } |
| 40 | + }) |
| 41 | + console.log(ret, event.target) |
| 42 | + targetLi && ul.insertBefore(targetLi, ret) |
| 43 | +}, 300) |
| 44 | + |
| 45 | +function bindEvent() { |
| 46 | + const li = document.querySelectorAll('ul li') |
| 47 | + ul.addEventListener('dragover', hadnleOver) |
| 48 | + li.forEach((item) => { |
| 49 | + console.log(item) |
| 50 | + item.addEventListener( |
| 51 | + 'drag', |
| 52 | + function () { |
| 53 | + // console.log('dragstart', this) |
| 54 | + }, |
| 55 | + false |
| 56 | + ) |
| 57 | + |
| 58 | + // bind dragStart event |
| 59 | + item.addEventListener('dragstart', (event) => { |
| 60 | + const target = event.target |
| 61 | + setTimeout(() => { |
| 62 | + target.classList.add('hidden-ul') |
| 63 | + }, 0) |
| 64 | + console.log('start', event.target) |
| 65 | + }) |
| 66 | + |
| 67 | + item.addEventListener('dragend', (event) => { |
| 68 | + event.target.classList.remove('hidden-ul') |
| 69 | + console.log('end', event) |
| 70 | + }) |
| 71 | + }) |
| 72 | +} |
| 73 | + |
| 74 | +bindEvent() |
0 commit comments