HTML5拖放

最新推荐文章于 2022-12-02 16:38:55 发布

uncle_Huang

最新推荐文章于 2022-12-02 16:38:55 发布

阅读量282

点赞数

分类专栏：前端文章标签： HTML5拖放

本文链接：https://blog.csdn.net/uncle_Huang/article/details/96182784

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

HTML5拖放

拖放的步骤

draggable属性设置为true
draggable = “true”;

2 编写与拖放有关的事件处理代码

事件/产生事件的元素	描述
dragstart /被拖放的元素	开始拖放元素
drag /被拖放的元素	拖放过程中
dragenter/拖放过程中鼠标经过的元素	被拖放的元素开始进入本元素的范围之内
dragover/拖放过程中鼠标经过的元素	被拖放的元素正在被元素范围内移动
dragleave /拖放过程中鼠标经过的元素	被拖放的元素离开本元素的范围
drop/拖放的目标元素	其他元素被拖放到了本元素中
dragend/被拖放的对象元素	拖放操作结束

拖放实例：
效果图：

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放</title>
    <script type="text/javascript" src="index.js"></script>
    <style>
        #drag{
            width: 540px;
            height: 320px;
        }
        #storage{
            width: 540px;
            height: 320px;
            border: 2px solid #d2d2d2;
            box-shadow: 1px 4px 8px #646464;
        }
    </style>
</head>
<body>
<div id="storage" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<img src="demo.jpg" id="drag" draggable="true" ondragstart="drag(event)" />
</body>
</html>

index.js

function allowDrop(ev) {
    ev.preventDefault();//不执行默认处理（拒绝被拖放）
}

function drag(ev) {

    ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev) {
   ev.preventDefault();
   var data = ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(data));
}

DataTransfer对象的属性和方法

属性/方法	描述
dropEffect属性	表示拖放操作的视觉效果，允许设置其值，这个效果必须用在effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值为none,copy,link,move
effectAllowed属性	用来指定当元素被拖动时被允许的视觉效果，可以指定的值为copy，link,move,copylink,linkmove,none
types属性	存入数据的种类，字符串的伪数据
void clearData(DOMString format)	清除
void setData(DOMString format,DOMString data)	存入
DOMString getData(DOMString format)	读取
void setDragImage(Element image,long x,long y)	用img元素来设置拖放图标

拖放的视觉效果
dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示一个元素被拖放时被允许的视觉效果，一般在ondragstart事件中设定。

属性值	说明
copy	允许被拖放的元素被复制到项目中
move	允许将被拖动元素移动到被拖动的目标元素中
link	通过拖放操作，被拖动的元素会链接到拖到的目标元素上
copylink	被拖动元素被复制或链接到拖动的目标元素中，根据拖动的目标元素来决定执行复制操作还是链接操作
copyMove	被拖动元素被复制或移动到拖动的目标元素中，根据拖动的目标元素来决定执行复制操作还是移动操作
linkmove	被拖动元素被链接或移动到拖动的目标元素中，根据拖动的目标元素来决定执行链接操作还是移动操作
all	允许执行所有拖动操作
none	不允许执行所有拖动操作
uninitialized	不指定effectAllowed属性值。这是将执行浏览器中默认允许的拖动操作，但是这个操作不能tong

dropEffect属性表示实际拖放的视觉效果，一般在ondragover事件中指定，允许的值为none,copy,link,move.

uncle_Huang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5拖放

HTML5拖放拖放的步骤draggable属性设置为truedraggable = “true”;2 编写与拖放有关的事件处理代码事件/产生事件的元素描述dragstart /被拖放的元素开始拖放元素drag /被拖放的元素拖放过程中dragenter/拖放过程中鼠标经过的元素被拖放的元素开始进入本元素的范围之内dragover/拖放过程中...
复制链接

扫一扫