html5指南--3.拖拽功能的实现

下一站永远 · 发表于 2012-12-22 20:38:58

<div id="cnblogs_post_body">　　本文的内容是关于在html5中如何实现html元素拖拽功能。在html5之前要实现拖拽，需要借助js，现在html5内部就支持了拖拽的功能，但是要实现稍微复杂的功能还是少不了js的帮忙。下面我们看几个例子。
　　1.创建拖拽对象
　　我们可以通过draggable属性告诉浏览器，哪些元素需要实现拖拽功能。draggable有三个值：true：元素可以被拖拽；false：元素不能被拖拽；auto：浏览器自己判断元素是否能被拖拽。
　　系统默认值是auto，但auto情况下浏览器对不同元素拖拽功能的支持是不一样，如：支持img对象，不支持div对象。所以，如果需要拖拽一个元素，最好还是把draggale设置为true。下面我们看一个例子：
<div class="cnblogs_code"><!DOCTYPE HTML><html><head> <title>Example</title> <style> #src > * { float: left; } #target, #src > img { border: thin solid black; padding: 2px; margin: 4px; } #target { height: 123px; width: 220px; text-align: center; display: table; } #target > p { display: table-cell; vertical-align: middle; } #target > img { margin: 1px; } </style></head><body> <div id="src"> <img draggable="true" id="car1" src="img/1.jpg" alt="car1" /> <img draggable="true" id="car2" src="img/2.jpg" alt="car2" /> <img draggable="true" id="car3" src="img/3.jpg" alt="car3" /> <div id="target"> <p id="msg"> drop here</p> </div> </div> <script> var src = document.getElementById("src"); var target = document.getElementById("target"); </script></body></html>

		自动登录	找回密码
密码			立即注册