跨浏览器的drag、drop（拖拽）事件

最新推荐文章于 2017-12-14 00:14:00 发布

nelson

最新推荐文章于 2017-12-14 00:14:00 发布

阅读量921

点赞数

分类专栏： Javascript HTML 文章标签：浏览器 function class button border html5

本文链接：https://blog.csdn.net/Do_it__/article/details/6405700

版权

Javascript 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

首先，需要清楚的一点是：对于支持html5的浏览器，要想拖动当前这个元素只需要再元素的标签内多添加一个属性：draggable="true"，然后在IE下，只有在a标签内加入这个属性才可以拖动一个标签。

当然，如果说用mouse属性模拟的话，也可以拖动一个标签，但是这个话题就不在本文的讨论范围了。

对于用鼠标拖动的元素能触发的事件有：ondragstart, ondrag, ondragend。 ondragenter, ondragover, ondragleave.

当用鼠标拖动的元素经过添加了属性：draggable=true的元素则会触发：ondragenter, ondragover, ondragleave事件。

今天先说到这：

贴一个自己写的代码：

<!doctype html> <html> <head> <meta charset="gbk"> <title>First Grid Demo</title> <style mce_bogus="1">body,button,input,select,textarea{ font:12px/1.5 Verdana,Tahoma,Arial,'/5b8b/4f53'; } .drag{ position: relative; } li, a{ display: block; height: 20px; width: 200px; background-color: #ccc; margin: 5px 0; cursor: move; } .test{ border: 1px dashed #CCC; width: 198px; height: 18px; background: none; }</style> <mce:script src="../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script> </head> <body> <div class="drag"> <a href="#" mce_href="#" draggable="true">number 1</a> <a href="#" mce_href="#" draggable="true">number 2</a> <a href="#" mce_href="#" draggable="true">number 3</a> <a href="#" mce_href="#" draggable="true">number 4</a> </div> <div id="temp" style="display: none" mce_style="display: none"></div> <mce:script type="text/javascript"></mce:script> </body> </html>

这是一个自己可以摆放顺序的代码。不过好像仍然有bug

nelson

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跨浏览器的drag、drop（拖拽）事件

<br />首先，需要清楚的一点是：对于支持html5的浏览器，要想拖动当前这个元素只需要再元素的标签内多添加一个属性：draggable="true"，然后在IE下，只有在a标签内加入这个属性才可以拖动一个标签。<br />当然，如果说用mouse属性模拟的话，也可以拖动一个标签，但是这个话题就不在本文的讨论范围了。<br />对于用鼠标拖动的元素能触发的事件有：ondragstart, ondrag, ondragend。 ondragenter, ondragover, ondragleave.<br
复制链接

扫一扫

专栏目录