HTML5 拖放

拖放功能是HTML5标准的一部分.

拖动图片到另一个矩形框里.

拖拽和放下

拖拽和放下是很普通的特征.就是你把一个对象拖到另一个不同的位置.

在HTML5里,拖放是标准的一部分,任何元素都可以进行拖动.

HTML 拖放例子

下面的是一个简单的拖放例子:

<!DOCTYPE HTML>
<html>
<head>
<script>
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));
}
</script></head>
<body>

<div id="div1" style="width: 100px;height: 80px;border: 1px solid gray;"
 ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" style="width: 100px;height: 80px;border: 1px solid gray;"
 src="/public/images/rose.jpg" draggable="true" 
ondragstart="drag(event)" width="336" height="69">
</body></html>

它可能看起来很复杂,让我们来梳理一下拖动和放下事件.

让一个元素可拖动

首先:要让一个元素可拖动,设置dragable属性为true:

<img draggable="true">

拖动什么 - ondragstart和setData()

然后,指定当元素被拖动时要发生什么.

在上面的例子中,ondragstart属性调用drag(event)函数,这指定拖动了什么数据.

dataTransfer.setData()方法设置数据类型和被拖动数据的值:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

在这个例子里,数据类型是"text"并且值是被拖动元素("drag1")的id.

在哪里放下 - ondragover

ondragover事件指定能在哪里放下被拖动的数据.

默认下,数据/元素不能在其它元素上放下.为了允许放下,我们必须阻止元素的默认处理.

只要调用event.preventDefault()方法就完成了ondragover事件:

event.preventDefault()

处理放下操作 - ondrop

当被拖动的数据放下时,一个放下事件就发生了.

在上面的例子里,ondrop属性调用函数drop(event):

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

代码解释:

调用preventDefault()函数来阻止浏览器默认处理数据(放下事件默认是打开一个链接)
要获取被拖动的数据用dataTransfer.getData()方法.这个方法会返回所有用setData()方法设置的同型数据.
被拖动的数据是被拖动元素("drag1")的id,把被拖动元素附加进放下元素里.

评论区

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索