HTML5 CSS3 专题拖放（Drag and Drop）

最新推荐文章于 2023-07-01 11:02:15 发布

VIP文章傻傻的装高智商

最新推荐文章于 2023-07-01 11:02:15 发布

阅读量482

点赞数

本文链接：https://blog.csdn.net/sdfwcc/article/details/86559908

版权

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/31413767

本来准备写一个支持多图片拖拽上传的例子，但是为了更好的理解，先介绍一下HTML5的拖放。

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

被拖元素，dragElement :

1、添加事件：ondragstart

2、添加属性：dragable

放置元素，dropElement:

1、添加事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop

和mouser划入划出一类的事件很类似，字面也很好理解，不赘述了，下面会用例子来说明。

1、页面上元素间的拖放

下面用个小例子，div间的拖放来展示，各个事件如何被触发：

<!DOCTYPE html><html><head>    <title></title>    <meta charset="utf-8"/>    <style type="text/css">        #dropEle        div        {            float: left;        }    </style>    <script src="../../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>