HTML中设定拖放数据的三种方式
在HTML5中，支持将数据从一个元素拖到另一个元素。通过Drag and Drop API，可以轻松实现拖放功能。当数据被拖动时，可以设置该数据如何处理。其中包括需要被复制、移动还是链接到目标元素。下面将详细介绍如何设置数据的处理方式。
1. 复制数据
在设置数据处理方式时，需要为元素绑定dragstart事件，该事件会在元素开始被拖动时触发。在dragstart事件中，需要设置数据的类型，以及要复制的数据。
例如，将一个图片元素拖动到另一个元素上，设置复制数据的代码如下：
<img src='example.jpg' draggable='true' ondragstart='event.dataTransfer.setData("text/plain", "example.jpg"); event.dataTransfer.effectAllowed = "copy";' />
在代码中，通过设置event.dataTransfer.setData()方法为数据赋值。该方法需要两个参数，第一个参数是数据格式类型，这里是"plain/text"；第二个参数是需要拷贝的数据，这里是文件名。然后通过设置event.dataTransfer.effectAllowed属性设置处理方式，这里的值为"copy"表示数据需要被复制。
对于目标元素，需要绑定drop事件，该事件会在拖动的元素被放置到目标元素上时触发。需要在drop事件中获取数据并进行处理，例如显示图片。
<div class='target' ondrop='event.preventDefault(); var data = event.dataTransfer.getData("text/plain"); var img = document.createElement("img"); img.src = data; this.appendChild(img);' ondragover='event.preventDefault();' />
在代码中，通过event.preventDefault()方法阻止默认行为，然后通过event.dataTransfer.getData()方法获取拖动元素的数据。获取的数据为拷贝的文件名。根据文件名创建img元素，并设置src属性为文件名。最后将img元素添加到目标元素中。
2. 移动数据
移动数据与复制数据类似，只需要在dragstart事件中设置effectAllowed值为"move"，如下所示：
<img src='example.jpg' draggable='true' ondragstart='event.dataTransfer.setData("text/plain", "example.jpg"); event.dataTransfer.effectAllowed = "move";' />
在目标元素的drop事件中，需要获取拖动元素的数据，并将数据添加到目标元素中。然后，需要在dragend事件中移除拖动元素。
<div class='target' ondrop='event.preventDefault(); var data = event.dataTransfer.getData("text/plain"); this.appendChild(document.createTextNode(data));' ondragover='event.preventDefault();' />
<script>
var dragElement = document.querySelector('img');
dragElement.addEventListener('dragend', function() {
dragElement.parentNode.removeChild(dragElement);
});
</script>
在代码中，通过创建文本节点将拖动的数据添加到目标元素中。在dragend事件中，通过removeChild()方法移除拖动元素。
3. 链接数据
如果希望将数据链接到目标元素，需要将effectAllowed值设置为"link"，然后在目标元素的drop事件中通过获取数据并跳转链接来实现。
<img src='example.jpg' draggable='true' ondragstart='event.dataTransfer.setData("text/plain", "example.jpg"); event.dataTransfer.effectAllowed = "link";' />
<div class='target' ondrop='event.preventDefault(); window.location.href=event.dataTransfer.getData("text/plain");' ondragover='event.preventDefault();' />
在目标元素的drop事件中，通过window.location.href将页面跳转到拖动元素的链接。
总结
通过Drag and Drop API，可以轻松实现拖放功能。通过设置effectAllowed值，可以将数据处理方式设置为复制、移动或链接。在拖动元素的事件中设置数据类型和数据，然后在目标元素的事件中对数据进行处理。需要注意的是，在move数据模式下需要在dragend事件中移除拖动元素。上述方法可以实现简单的拖放功能，但在实际应用中，可能需要更加复杂的逻辑来实现更加灵活的拖放效果。