HTML5拖放

最新推荐文章于 2024-05-14 18:01:48 发布

gqhp

最新推荐文章于 2024-05-14 18:01:48 发布

阅读量92

点赞数

文章标签： css

本文链接：https://blog.csdn.net/sjpgyy/article/details/106535723

版权

HTML5拖放

对象元素的draggable属性设置为true(draggable=”true”),还需要注意的是a元素和img元素必须指定href.

2.编写与施放有关的事件处理代码。

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

DataTransfer对象的属性和方法

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

3.设置拖放时的视觉效果

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

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

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
     function alloeDrop(ev)
        {
            //不执行默认处理（拒绝被拖放）
            ev.preventDefault();
        }
        function drag(ev)
        {
            //使用setData（数据类型，携带的数据）
            //方法将要拖放的数据存入dataTransfer对象
            ev.dataTransfer,setData("Text",ev.target.id);
        }
         function drop(ev)
        {
            //不执行默认处理（拒绝被拖放）
            ev.preventDefault();
            //使用getData()获取到数据，然后赋值给data
            var data=ev.dataTransfer.getData("Text");
            //使用appendChild方法把拖动的节点放到节点中成为他的子节点
            ev.target.appendChild(document.getElementByld(data));
        }
        </script>
    <style>
        #tuo{
            background:#e54d26;
            width:540px;
            height:320px;
        }
        #cun{
            width:540px;
            height:320px;
            border:2px solid #D2D2D2;
            box-shadow:1px 4px 8px #646464;
        }
    </style>
</head>
<body>
<div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<img src="html5.png" id="tuo" draggable="true" ondragstart="drag(event)" width="500" height="280"></img>
</body>
</html>