【Html5拖放详解】

文章目录

前言
一、拖放是什么？
二、使用步骤
- 1.设置元素为可拖放
- 2.被拖放对象的事件
- 3.进入目标投放区的事件
- 4.传递拖拽数据
三、注意：阻止默认行为
四、实例
五、dataTransfer 对象的属性
总结

前言

拖放是常见是一个常见操作，在Html5中任何元素都可以被拖放。

提示：以下是关于Html5中拖放的一些知识点，下面案例可供参考

一、拖放是什么？

拖放可以分拖拽（Drag）和放开（Drop）。拖拽就是按下左键移动鼠标到指定位置，放开就是放开鼠标左键，放下对象

二、使用步骤

1.设置元素为可拖放

true:可以被拖放
false:不可以被拖放
auto:浏览器自己判断是否可以被拖放

代码如下（示例）：

 <div class="text" draggable="true">hello word</div>

2.被拖放对象的事件

ondragstart——开始拖放
ondrag——拖放过程中
ondragend——结束拖放时

3.进入目标投放区的事件

ondragenter——被拖放元素鼠标进入时
ondragover——被拖放元素鼠标进入了
ondragleave——被拖放元素鼠标离开了
ondrop——被拖放元素放下了

在这里插入图片描述

4.传递拖拽数据

dataTransfer对象可以在拖拽元素和投放区进行数据共享

setData(键名,键值)
getData(键名)
代码如下（示例）：

  text.ondragstart=function(e){
        e.dataTransfer.setData('content',text.innerHTML)
    }
  
    box.ondrop=function(e){
       var con= e.dataTransfer.getData('content')
        box.innerHTML=con
    }

补充
- clearData(键名)
删除数据

pret = object.cleardata([sdataformat])
参数sdataformat是指定要删除的数据格式的字符串，可以是下面的值。

Text：删除文本格式数据。
URL：删除URL格式数据。
File：删除文件格式数据。
HTML：删除HTML格式数据。
Image：删除图像格式数据。

如果不指定参数sdataformat，则清空dataTransfer对象中的所有数据。

三、注意：阻止默认行为

一定要在ondragover中阻止一些放置区域的默认行为，因为默认行为中不允许放置其他元素

 box.ondragover=function(e){
        e.preventDefault()
    }

四、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            text-align: center;
            line-height: 300px;
            border: 2px solid #ccc;
        }
        .text{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="text" draggable="true">hello word</div>
    <div class="box"></div>
</body>
<script>
    var text=document.querySelector('.text')
    var box=document.querySelector('.box')

    text.ondragstart=function(e){
        e.dataTransfer.setData('content',text.innerHTML)
    }
  
    box.ondrop=function(e){
       var con= e.dataTransfer.getData('content')
        box.innerHTML=con
    }
  box.ondragover=function(e){
        e.preventDefault()
    }
</script>
</html>

拖放前

在这里插入图片描述
拖放后

五、dataTransfer 对象的属性

（1）dropEffect
dropEffect 属性用于获取和设置拖放操作的类型以及光标的类型（形状）。

dropEffect 属性的可能取值

copy 显示copy光标
link 显示link光标
move 显示move光标
none 默认值，即没有指定光标

（2）effectAllowed
effectAllowed属性用于获取和设置对被拖放的源对象允许执行何种数据传输操作。

effectAllowed 属性的可能取值

copy 允许执行复制操作
link 将源对象链接到目的地
move 将源对象移动到目的地
copyLink 可以是copy或link，取决于目标对象的默认值
copyMove 可以是copy或move，取决于目标对象的默认值
linkMove 可以是link或move，取决于目标对象的默认值
all 允许所有数据传输操作
none 没有数据传输操作，即放开时不执行任何操作
uninitialized 表明没有为effectAllowed属性设置值，执行默认的拖放操作，为默认值

————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/qq_36823300/article/details/100936517

总结

以上就是今天要讲的内容，本文简单介绍了拖放，希望可以有帮助。