HTML5 如何实现拖拽效果

最新推荐文章于 2024-04-19 09:42:12 发布

振长策而御宇内

最新推荐文章于 2024-04-19 09:42:12 发布

阅读量4.6k

点赞数 3

分类专栏： HTML5 文章标签：拖拽 html5 教程

本文链接：https://blog.csdn.net/zhenyu5211314/article/details/12966535

版权

HTML5 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

最近有一个项目，需要做一个页面效果，就是将页面中的图片元素拖拽到指定的位置并进行保存，页面加载后自动载人上次拖拽的位置（比如页面中有一医院的平面简图，现在想把某一温度传感器设备的简图放到指定的房间），开始的时候想用Flex或者Flash做，可惜这两个都不会，在网上找了几个实现拖拽的例子，终于可以拖拽图片啦，但是在与数据库交互时，如何存储并再次显示图片的坐标犯了难。

这两天在看HTML5，发现HTML5可以直接实现拖拽，这样相比Flash，既不需要插件支持，也不需要在于数据库交互时发生问题。

这是在W3School上看到的实现拖拽的教程点击打开链接

这是W3School上面可运行的例子拖拽例子

上面的例子实现的是在两个<div>中实现拖拽图片，其实实现拖拽效果只需要以下几步：

1. 设置被拖拽元素属性为可拖放，draggable = "true"

2. 设置拖动时响应的事件，即拖动时元素效果，ondragstart = "drag(event)" ，下面的函数dataTransfer.setData设置拖拽元素的数据类型和值

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

3. 设置div允许其他元素放到上面，οndragοver="allowDrop(event)"

function allowDrop(ev)
{
ev.preventDefault();
}

4. 设置元素放到div上的响应事件，οndrοp="drop(event)"

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

其实就是把元素设置成div的子元素

下面是完整的代码：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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)">
  <img src="/i/w3school_logo_black.gif" draggable="true" οndragstart="drag(event)" id="drag1" />
</div>
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>


</body>
</html>

只要把每个屋子设置成可以将元素拖拽上去的div就行啦，下次加载的时候直接将元素设置成该div的子元素，可是还有重复拖拽，覆盖等情况需要考虑。

振长策而御宇内

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
HTML5 如何实现拖拽效果

最近有一个项目，需要做一个页面效果，就是将页面中的图片元素拖拽到指定的位置并进行保存，页面加载后自动载人上次拖拽的位置（比如页面中有一医院的平面简图，现在想把某一温度传感器设备的简图放到指定的房间），开始的时候想用Flex或者Flash做，可惜这两个都不会，在网上找了几个实现拖拽的例子，终于可以拖拽图片啦，但是在与数据库交互时，如何存储并再次显示图片的坐标犯了难。这两天在看HT
复制链接

扫一扫