您的位置：首页 > Web前端 > HTML5

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

2015-06-06 13:00 639 查看

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>

运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航