html5指南--1.创建拖拽对象_html5拖拽并生成新对象-优快云博客

html5指南--1.创建拖拽对象

本文的内容是关于在html5中如何实现html元素拖拽功能。在html5之前要实现拖拽，需要借助js，现在html5内部就支持了拖拽的功能，但是要实现稍微复杂的功能还是少不了js的帮忙。下面我们看几个例子。

　　1.创建拖拽对象

　　我们可以通过draggable属性告诉浏览器，哪些元素需要实现拖拽功能。draggable有三个值：true：元素可以被拖拽；false：元素不能被拖拽；auto：浏览器自己判断元素是否能被拖拽。

　　系统默认值是auto，但auto情况下浏览器对不同元素拖拽功能的支持是不一样，如：支持img对象，不支持div对象。所以，如果需要拖拽一个元素，最好还是把draggale设置为true。下面我们看一个例子：

<!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>

运行效果：