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

html5指南--3.创建投放区

2015-06-06 12:59 706 查看

html5指南--3.创建投放区

我们来看投放区相关的事件：dragenter：当拖拽对象进入投放区时触发；dragover：拖拽对象在投放区内移动时触发；dragleave：拖拽对象没有投放到投放区，离开投放区的时候触发；drop：拖拽对象投放在投放区时触发。

　　我们来看一个例子：
<!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;

        }

        img.dragged

        {

            background-color: lightgrey;

        }

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

        var msg = document.getElementById("msg");

        var draggedID;

        target.ondragenter = handleDrag;

        target.ondragover = handleDrag;

        function handleDrag(e) {

            e.preventDefault();

        }

        target.ondrop = function (e) {

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

            target.innerHTML = "";

            target.appendChild(newElem);

            e.preventDefault();

        }

        src.ondragstart = function (e) {

            draggedID = 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>

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

标签：

相关文章推荐

新的分享

章节导航