js学习-HTML5的拖放

最新推荐文章于 2023-03-31 16:25:10 发布

kaka_hikun

最新推荐文章于 2023-03-31 16:25:10 发布

阅读量154

点赞数

分类专栏： js学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48235555/article/details/106456742

版权

js学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、拖放有关的事件处理代码

事件（在前面加上on是属性）	产生事件的元素	描述
dragstart	被拖放的元素	开始拖放
drag	被拖放的元素	拖放过程中
dragenter	拖放过程中鼠标经过的元素	被拖放元素开始进入范围
dragover	拖放过程中鼠标经过的元素	被拖放元素正在移动（当某被拖动的对象在另一对象容器范围内）
dragleave	拖放过程中鼠标经过的元素	被拖放元素离开本元素范围
drop	拖放的目标元素	其他元素被拖放到本元素中（释放鼠标键时触发此事件）
drapend	拖放的对象元素	拖放操作结束

二、DataTransfer对象的属性与方法

属性/方法	描述
dropEffect属性	表示拖放操作的视觉效果，允许设置其值，这个效果必须用在effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值none、copy、link、move
effectAllowed属性	用来指定当元素被拖放时所允许的视觉效果，可以指定的值copy、link、move、copylink、linkmove、all、none、uninitialized
types属性	存入数据的种类，字符串的伪数组
void clearData ( DOMString format )	清除DataTransfer对象中存放的数据，如果省略掉参数format就会清除全部数据
void setData(DOMString format, DOMString data)	向DataTransfer对象中存入数据
DOMString getData (DOMString format )	从DataTransfer对象中读取数据
void setDragImage (Element image, long x ,long y)	用img元素来设置拖放图标

三、设置被拖放时的视觉效果

在这里插入图片描述

四、拖放步骤

1、为了使元素可拖动，对象元素的draggable属性设置为true

<img id="tuo" draggable="true">

2、拖放什么：调用ondragstart 和 setData(）
dataTransfer.setData() 方法设置被拖数据的数据类型和值:

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);  //值是可拖动元素的id：tuo
}

3、在何处放置 - ondragover
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

function allowDrop(ev)
{
    ev.preventDefault();  //不执行默认处理（允许被拖放到其他元素中）
}

4、进行放置 - ondrop

function drop(ev)
{
    ev.preventDefault();
    //通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    var data = ev.dataTransfer.getData("Text");
    //使用appendChild方法，把被拖元素追加到放置元素（目标元素）中
    ev.target.appendChild(document.getElementById(data));
}

实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function allowDrop(ev)  //οndragοver="allowDrop(event)"
        {
            ev.preventDefault();
            ev.dataTransfer.dropEffect = 'link';  //dropEffect属性在dropover事件中设定
        }

        function drag(ev)  //οndragstart="drag(event)"
        {          
            ev.effeAllowed = 'all';  //effectAllowed属性在dragstart事件中设定
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev)  //οndrοp="drop(event)"
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
    <style>
        #cun{
            width: 540px;
            height: 320px;
            border: 2px solid #D2D2D2;
            box-shadow: 1px 4px 8px #646464;
        }
        #tuo{
            background: #e54d26;
            width: 540px;
            height: 320px;
        }

    </style>
</head>
<body>
    <div  id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br/>
    <img src="image.jpg" id="tuo" draggable="true" οndragstart="drag(event)"  width="500" height="280" / >
</body>
</html>