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

html5指南--4.使用DataTransfer

2015-06-06 12:57 627 查看

html5指南--4.使用DataTransfer

我们使用DataTransfer从拖拽对象向投放区传递数据。DataTransfer有下面的属性和方法：types：返回数据的格式；getData(<format>)：返回指定格式数据；setData(<format>, <data>)：设置指定格式数据；clearData(<format>)：移除指定格式数据；files：返回已经投放的文件数组。
　我们来看下面的例子，他实现的效果和例3一样：
<!DOCTYPE HTML>

<html>

<head>

    <title>Example</title>

    <style>

        #src > *

        {

            float: left;

        }

        #src > img

        {

            border: thin solid black;

            padding: 2px;

            margin: 4px;

        }

        #target

        {

            border: thin solid black;

            margin: 4px;

        }

        #target

        {

            height: 123px;

            width: 220px;

            text-align: center;

            display: table;

        }

        #target > p

        {

            display: table-cell;

            vertical-align: middle;

        }

        img.dragged

        {

            background-color: Orange;

        }

    </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");

        target.ondragenter = handleDrag;

        target.ondragover = handleDrag;

        function handleDrag(e) {

            e.preventDefault();

        }

        target.ondrop = function (e) {

            var droppedID = e.dataTransfer.getData("Text");

            var newElem = document.getElementById(droppedID).cloneNode(false);

            target.innerHTML = "";

            target.appendChild(newElem);

            e.preventDefault();

        }

        src.ondragstart = function (e) {

            e.dataTransfer.setData("Text", e.target.id);

            e.target.classList.add("dragged");

        }

        src.ondragend = function (e) {

            var elems = document.querySelectorAll(".dragged");

            for (var i = 0; i < elems.length; i++) {

                elems[i].classList.remove("dragged");

            }

        }

    </script>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航