小强的HTML5移动开发之路（16）——神奇的拖放功能-H5教程

<p>在智能手机发展飞速的现在拖放功能已经成为一种时尚，但是在我们的浏览器上是不是还缺少这种方便快捷的功能?在HTML5的新标准中就有关于拖放的标准，作为Html5标准的一部分，任何元素都可以被拖放。</p><p>一、浏览器支持情况</p><p><br/></p><p>Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。</p><p><br/></p><p>注释：在 Safari 5.1.2 中不支持拖放。</p><p>二、使用方法</p><p>首先，为了使元素可拖动，把 draggable 属性设置为 true ：</p><pre class="brush:html;toolbar:false">&lt;img&nbsp;draggable=&quot;true&quot;&nbsp;/&gt;</pre><p>然后，规定元素被拖动时，会发生什么 &nbsp;</p><p><br/></p><p>让ondragstart属性调用一个函数，并给该函数返回一个拖动对象</p><pre class="brush:html;toolbar:false">&lt;img&nbsp;id=&quot;drag1&quot;&nbsp;src=&quot;img_logo.gif&quot;&nbsp;draggable=&quot;true&quot;&nbsp;&nbsp; ondragstart=&quot;drag(event)&quot;&nbsp;width=&quot;336&quot;&nbsp;height=&quot;69&quot;&nbsp;/&gt;</pre><p>dataTransfer.setData() 方法设置被拖数据的数据类型和值：(我们将被拖动对象的id传给dataTransfer)</p><pre class="brush:html;toolbar:false">function&nbsp;drag(ev)&nbsp;&nbsp; {&nbsp;&nbsp; &lt;span&nbsp;style=&quot;white-space:pre&quot;&gt;&nbsp;&nbsp;&lt;/span&gt;ev.dataTransfer.setData(&quot;Text&quot;,ev.target.id);&nbsp;&nbsp; }</pre><p style="margin: 0px; padding: 0px; color: rgb(85, 85, 85); font-family: &quot;microsoft yahei&quot;; white-space: normal; background-color: rgb(255, 255, 255); border: 0px;">放到何处 - ondragover</p><p><br/></p><p>ondragover 事件规定在何处放置被拖动的数据。</p><p>默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。</p><p>这要通过调用 ondragover 事件的&nbsp;event.preventDefault() 方法：</p><pre class="brush:html;toolbar:false">event.preventDefault()</pre><p>当放置被拖数据时，会发生 drop 事件。</p><p>在上面，ondrop 属性调用了一个函数，drop(event)：</p><pre class="brush:html;toolbar:false">function&nbsp;drop(ev)&nbsp;&nbsp; {&nbsp;&nbsp; &lt;span&nbsp;style=&quot;white-space:pre&quot;&gt;&nbsp;&nbsp;&lt;/span&gt;ev.preventDefault();&nbsp;&nbsp; &lt;span&nbsp;style=&quot;white-space:pre&quot;&gt;&nbsp;&nbsp;&lt;/span&gt;var&nbsp;data=ev.dataTransfer.getData(&quot;Text&quot;);&nbsp;&nbsp; &lt;span&nbsp;style=&quot;white-space:pre&quot;&gt;&nbsp;&nbsp;&lt;/span&gt;ev.target.appendChild(document.getElementById(data));&nbsp;&nbsp; }</pre><p>代码解释：</p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）</p></li><li><p>通过 dataTransfer.getData(&quot;Text&quot;) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。</p></li><li><p>被拖数据是被拖元素的 id (&quot;drag1&quot;)</p></li><li><p>把被拖元素追加到放置元素（目标元素）中</p></li></ul><p>二、实例说明</p><pre class="brush:html;toolbar:false">&lt;!DOCTYPE&nbsp;HTML&gt;&nbsp;&nbsp; &lt;html&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//阻止对元素的默认处理方式&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;allowDrop(ev)&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ev.preventDefault();&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//将被拖动对象的id传递给dataTransfer中间对象&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;drag(ev)&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ev.dataTransfer.setData(&quot;Text&quot;,ev.target.id);&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//取得拖动对象id找到对象实例并用DOM模型添加到&lt;p&gt;里面&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;drop(ev)&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ev.preventDefault();&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;data=ev.dataTransfer.getData(&quot;Text&quot;);&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ev.target.appendChild(document.getElementById(data));&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--要被拖动到的地方--&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&nbsp;id=&quot;p1&quot;&nbsp;ondrop=&quot;drop(event)&quot;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ondragover=&quot;allowDrop(event)&quot;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style=&quot;border:1px&nbsp;solid&nbsp;red;width:300px;height:200px;&quot;&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--要被拖动的对象--&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;id=&quot;drag1&quot;&nbsp;src=&quot;test.png&quot;&nbsp;draggable=&quot;true&quot;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ondragstart=&quot;drag(event)&quot;/&gt;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt;&nbsp;&nbsp; &lt;/html&gt;</pre><p><img src="http://img.erdangjiade.com//upload/image/505/345/581/1485056855350137.gif" title="1485056855350137.gif" alt="728.gif"/></p><p>以上就是&nbsp;小强的HTML5移动开发之路（16）——神奇的拖放功能的内容，更多相关内容请关注PHP中文网（www.erdangjiade.com）！</p>