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

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>

 运行效果:
图片 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值