拖放角度 - Html

Html中拖放是一种常见的用户交互方式。通过拖动页面上的元素，可以让用户在应用程序中执行不同的操作。本文将介绍Html中如何使用拖放功能。

原理

当用户拖动一个元素时，会产生一系列的拖动事件。这些事件可以被程序所捕获，从而完成拖放操作。

在Html中，拖拽分为三个事件：

1. ondragstart - 拖拽开始时触发
2. ondragover - 拖拽过程中触发
3. ondrop - 拖拽结束时触发

使用

要使用拖放功能，需要在拖动元素和目标元素上分别设置相应事件的处理程序。

拖动元素

拖动元素需要设置 ondragstart 事件处理程序，该处理程序需要在开始拖动时将拖动的元素的数据放在 dataTransfer 对象中。

<div draggable="true" ondragstart="dragStart(event)">拖动元素</div>

<script>
function dragStart(e) {
  e.dataTransfer.setData('text/plain', e.target.id);
}
</script>

目标元素

目标元素需要设置 ondragover 和 ondrop 事件处理程序。ondragover 处理程序需要阻止默认操作并且指示可放置，ondrop 处理程序需从 dataTransfer 对象中获取数据并执行相应操作。

<div ondragover="dragOver(event)" ondrop="drop(event)">目标元素</div>

<script>
function dragOver(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
}

function drop(e) {
  e.preventDefault();
  var data = e.dataTransfer.getData('text/plain');
  //执行相应操作
}
</script>

示例

以下示例演示了如何在页面上实现拖放列表的功能。在这个示例中，可以将一个列表项拖动到另一个列表中。拖动过程中，原始列表项将变为半透明状态。

<ul id="list1">
  <li draggable="true" ondragstart="dragStart(event)">列表项1</li>
  <li draggable="true" ondragstart="dragStart(event)">列表项2</li>
  <li draggable="true" ondragstart="dragStart(event)">列表项3</li>
</ul>

<ul id="list2" ondragover="dragOver(event)" ondrop="drop(event)">
  <li>目标列表1</li>
  <li>目标列表2</li>
</ul>

<script>
var currentItem = null;

function dragStart(e) {
  currentItem = e.target;
  e.dataTransfer.setData('text/plain', e.target.id);
  e.target.style.opacity = '0.4';
}

function dragOver(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
}

function drop(e) {
  e.preventDefault();
  var data = e.dataTransfer.getData('text/plain');
  var target = e.target.nodeName == 'LI' ? e.target : e.target.parentNode;

  target.parentNode.insertBefore(currentItem, target.nextSibling);
  currentItem.style.opacity = '1';
}
</script>

总结

Html中拖放功能可以增加页面的交互性，通过设置事件处理程序可以实现各种效果。程序员需要理解拖放事件的原理，掌握拖放用法，充分发挥拖放的功能。