DataTransfer.dropEffect作用和效果演示实例页面

回到相关文章 »

效果：

拖动图片到下面3个对应容器，看看鼠标手形：

代码：

CSS代码：
.box { width: 256px; height: 171px; border: 1px solid #ccc; background-color: #f5f5f5; }
HTML代码：
<div id="box" class="box">
  <p><input type="radio" id="move" name="effect" value="move" checked><label for="move">move移动</label></p>
  <p><input type="radio" id="copy" name="effect" value="copy"><label for="copy">copy复制</label></p>
  <p><input type="radio" id="link" name="effect" value="link"><label for="link">link链接</label></p>
  <p><input type="radio" id="none" name="effect" value="none"><label for="none">none禁止</label></p>
</div>
JS代码：
// 经过盒子
box.addEventListener('dragover', function (event) {
    event.preventDefault();
    // 设置dropEffect值为选中的单选选项
    event.dataTransfer.dropEffect = document.querySelector('input:checked').value;
});