50projects50days知识点-20-drag-n-drop

HTML拖拽

示例网址：

https://50projects50days.com/projects/drag-n-drop/
http://50projects.tc.cluski.top/50projects50days/drag-n-drop/

效果：

drag-n-drop

思路：

排版布局没有什么好说的，都是常规操作。

此例子更多使用到了拖拽相关的功能。

HTML拖拽

要在HTML中拖拽元素需要给元素设置draggable="true"属性

<div class="fill" draggable="true"></div>

dragstart

dragstart 事件在用户开始拖动元素或被选择的文本时调用。

在此dragstart事件的处理函数可以设置被拖动元素的一些属性，例如，在本例子中，给被拖动元素中加了一个类名，并且将原位置的图像给隐藏掉了。

fill.addEventListener('dragstart', dragStart)

function dragStart() {
    this.className += ' hold'
    // 为了可以将原本位置的图像给隐藏掉
    setTimeout(() => this.className = 'invisible', 0)
}

dragend

dragend 事件在拖放操作结束时触发（通过释放鼠标按钮或单击 escape 键）。

在此例子中，重置了被拖拽目标的类列表：

fill.addEventListener('dragend', dragEnd)

function dragEnd() {
    this.className = 'fill'

dragover

dragover 事件在可拖动的元素或者被选择的文本被拖进一个有效的放置目标时（每几百毫秒）触发。该事件在放置目标上触发。

const empties = document.querySelectorAll('.empty')

for(const empty of empties) {
    empty.addEventListener('dragover', dragOver)
    empty.addEventListener('dragenter', dragEnter)
    empty.addEventListener('dragleave', dragLeave)
    empty.addEventListener('drop', dragDrop)
}

function dragOver(e) {
    e.preventDefault()
}

dragenter

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

function dragOver(e) {
    e.preventDefault()
}

dragleave

dragleave 事件在拖动的元素或选中的文本离开一个有效的放置目标时被触发。此事件不可取消。

在此例子中重置了emtpy元素的类列表：

function dragLeave() {
    this.className = 'empty'
}

drop

drop 事件在元素或选中的文本被放置在有效的放置目标上时被触发。

在此例子中将拖拽元素放入了一个目标empty元素中：

function dragDrop() {
    this.className = 'empty'
    this.append(fill)
}

在一个简单的拖拽处理中，有三个事件处理程序：

在 dragstart 事件处理程序中，我们得到了用户拖动元素的引用。

在目标容器的 dragover 事件处理程序中，我们调用 event.preventDefault()，这使它能够接收 drop 事件。

在放置区域的 drop 事件处理程序中，我们将可拖动的元素从原始区域移动到可放置区域。