Question

我为HTML5拖放做了一个教程。然而，这不起作用。某种程度上事件没有添加到div。

在列式样式的教程中，之后在那里向这些列添加了一些事件处理程序，但它们没有被调用。

<!DOCTYPE HTML>
<html>
<head>
    <style>
        [draggable] {
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }
        .column {
            height: 150px;
            width: 150px;
            float: left;
            border: 2px solid #666666;
            background-color: #ccc;
            margin-right: 5px;
            -webkit-border-radius: 10px;
            -ms-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 3px #000;
            -ms-box-shadow: inset 0 0 3px #000;
            box-shadow: inset 0 0 3px #000;
            text-align: center;
            cursor: move;
        }
        .column header {
            color: #fff;
            text-shadow: #000 0 1px;
            box-shadow: 5px;
            padding: 5px;
            background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
            background: -webkit-gradient(linear, left top, right top,
                                        color-stop(0, rgb(0,0,0)),
                                        color-stop(0.50, rgb(79,79,79)),
                                        color-stop(1, rgb(21,21,21)));
            background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
            background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
            border-bottom: 1px solid #ddd;
            -webkit-border-top-left-radius: 10px;
            -moz-border-radius-topleft: 10px;
            -ms-border-radius-topleft: 10px;
            border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 10px;
            -ms-border-top-right-radius: 10px;
            -moz-border-radius-topright: 10px;
            border-top-right-radius: 10px;
        }
    </style>
    <script type="text/javascript">
        function handleDragStart(e) {
            this.style.opacity = '0.4';
        }

        function handleDragOver(e) {
            if (e.preventDefault) {
                e.preventDefault();
            }

            e.dataTransfer.dropEffect = 'move';

            return false;
        }

        function handleDragEnter(e) {
            this.classList.add('over');
        }

        function handleDragLeave(e) {
            this.classList.remove('over'); 
        }

        function handleDrop(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            }

            return false;
        }

        function handleDragEnd(e) {
            [].forEach.call(cols, function (col) {
                col.classList.remove('over');
            });
        }

        var cols = document.querySelectorAll('#columns .column');
        [].forEach.call(cols, function(col) {
            col.addEventListener('dragstart', handleDragStart, false);
            col.addEventListener('dragenter', handleDragEnter, false)
            col.addEventListener('dragover', handleDragOver, false);
            col.addEventListener('dragleave', handleDragLeave, false);
            col.addEventListener('drop', handleDrop, false);
            col.addEventListener('dragend', handleDragEnd, false);
        });
    </script>
</head>
<body>
    <div id="columns">
        <div class="column" draggable="true"><header>A</header></div>
        <div class="column" draggable="true"><header>B</header></div>
        <div class="column" draggable="true"><header>C</header></div>
    </div>
</body>

HTML5拖放脚本无法正常工作

0 个答案: