HTML5 – 拖拽功能

最新推荐文章于 2021-06-05 10:55:43 发布

佐笾已逝

最新推荐文章于 2021-06-05 10:55:43 发布

阅读量88

点赞数

分类专栏： Html5 文章文章标签： HTML5 配置管理 UI HTML

本文链接：https://blog.csdn.net/wjlgryx/article/details/83878074

版权

Html5 文章专栏收录该内容

80 篇文章 0 订阅

订阅专栏

为了演示拖拽用例，我要创建一个简单的网络配置工具(UI),管理员可以用它来收集资源。你能在各个区域之间拖拽资源，往区域里添加资源，删除没有用的资源。出于教学的目的，我尽量使这个例子简单，但可以看到，依据这些基本的做法，你可以开发出一个全功能的网络管理工具。

实现拖拽功能的关键方法非常的简单，就像下面写的这样：

function dragIt(target, e) {
e.dataTransfer.setData(‘SpanImg’, target.id);
}

function dropIt(target, e) {
var id = e.dataTransfer.getData(‘SpanImg’);
target.appendChild(document.getElementById(id));
e.preventDefault();
}

我使用了table元素来实现布局结构，并把它当做ondrop事件的目标：

<td align=”center” width=”100″ id=”blue” οndrοp=”dropIt(this, event)” οndragenter=”return false” οndragοver=”return false”> …. </td>

我使用了span元素（包裹住图片）做拖拽对象：

<span draggable=”true” id=”t_1″ οndragstart=”dragIt(this, event)”><img src=”https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/tower.jpg“></span>

你可以下载拖拽例子中的所有的HTML代码点击下载.