当前位置: 代码迷 >> 综合 >> HTML5 CSS3 专题 拖放 (Drag and Drop)
  详细解决方案

HTML5 CSS3 专题 拖放 (Drag and Drop)

热度:44   发布时间:2024-01-13 09:37:30.0
               

转载请标明出处: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>    <