HTML5 学习之页面元素的拖动

最新推荐文章于 2023-09-12 10:26:10 发布

weixin_30546189

最新推荐文章于 2023-09-12 10:26:10 发布

阅读量189

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/supercsharp/archive/2012/09/02/2667296.html

版权

HTML5允许对页面元素进行拖动，只要在元素的属性中加上draggable="true"，就可以拖动了。

在拖动的同时，必须记录被拖动的元素，通过在元素上注册事件ondragstart即可实现，比如规定了一个img元素可以拖动，代码如下:

function drag(event)

{

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

}

在拖动img的时候，drag函数就会把img的id属性记录在事件中，记录值的类型是Text。

下一步是规定哪些元素可以放置被拖动的img，比如一个div可以放置这个被拖动的img, 需要在这个div上定义一个事件:ondragover,在这个事件中，需要阻止对事件的默认处理方式，其实就是硬性的加上一句:event.preventDefault()

function allowDrop(event)

{

event.preventDefault();

}

下一步就是要在容纳这个img的div中把这个img放到里面，当放置的时候，会触发ondrop事件通过event.dataTransfer.getData("Text")来得到上面event.dataTransfer.setData("Text",ev.target.id)的img的id,通过event.target.appendChild(document.getElementById(data))来把img放到div中，注意这里event.target指的是div，不是上面的img了。至此，页面的拖动完成了。下面贴出在w3school中的实例代码:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
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" οndrοp="drop(event)"
οndragοver="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
οndragstart="drag(event)" width="336" height="69" />

</body>
</html>

转载于:https://www.cnblogs.com/supercsharp/archive/2012/09/02/2667296.html

weixin_30546189

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 学习之页面元素的拖动

HTML5允许对页面元素进行拖动，只要在元素的属性中加上draggable="true"，就可以拖动了。在拖动的同时，必须记录被拖动的元素，通过在元素上注册事件ondragstart即可实现，比如规定了一个img元素可以拖动，代码如下:<img draggble="true" ondragstart="drag(event);">function drag(event)...
复制链接

扫一扫