Question

我在下面的代码中使用javascript在HTML中拖动单词 clear和showElement按钮不起作用。

我该怎么做：
A）按清除按钮清除购物图表并刷新灰色框
B）用字符串而不是对象（掉落的产品）打印元素 C）使代码工作，而不必使用列表项标记（ul li）

一个非常新的JavaScript我提前感谢你！

PS。我不想使用jQuery。

下面给出了代码作为文本或JSFiddle（http://jsfiddle.net/9SfVR/）：

<!DOCTYPE html>

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style>
        ul, li{
            list-style: none;
            margin: 0px;
            padding: 0px;
            cursor: pointer;
        }
        section#cart ul{
            height: 200px;          
            overflow: auto;
            background-color: #cccccc;
        }
    </style>



    <script>
        var items;
        var cart;
        function addEvent(element, event, delegate ) {
            if (typeof (window.event) != 'undefined' && element.attachEvent)
                element.attachEvent('on' + event, delegate);
            else 
                element.addEventListener(event, delegate, false);
        }

        addEvent(document, 'readystatechange', function() {
            if ( document.readyState !== "complete" ) 
                return true;

             items = document.querySelectorAll("section.products ul li");
             cart = document.querySelectorAll("#cart ul")[0];


            function addCartItem(item, id) {
                var clone = item.cloneNode(true);
                clone.setAttribute('data-id', id);
                clone.removeAttribute('id');
                cart.appendChild(clone);
            }

            function deleteCartItem(item, id) {
                cart.removeChild(item);
            }

            function onDrop(event){         
                if(event.preventDefault) event.preventDefault();
                if (event.stopPropagation) event.stopPropagation();
                else event.cancelBubble = true;
                var id = event.dataTransfer.getData("Text");
                var item = document.getElementById(id);                     
                var exists = document.querySelectorAll("#cart ul li[data-id='" + id + "']");
                if(exists.length <= 0){
                    addCartItem(item, id);
                }
                return false;
            }


            function onDragOver(event){
                if(event.preventDefault) event.preventDefault();
                if (event.stopPropagation) event.stopPropagation();
                else event.cancelBubble = true;
                return false;
            }

            addEvent(cart, 'drop', onDrop);
            addEvent(cart, 'dragover', onDragOver);

            function onDrag(event){
                event.dataTransfer.effectAllowed = "move";
                event.dataTransfer.dropEffect = "move";
                var target = event.target || event.srcElement;
                var success = event.dataTransfer.setData('Text', target.id);
            }

            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                item.setAttribute("draggable", "true");
                addEvent(item, 'dragstart', onDrag);
            };
        });
        //end of dragNdrop


        function myClearButton(event)
        {
    //  cart = document.querySelectorAll("#cart ul")[0];
         var cart2 = document.querySelectorAll("section.cart ul li");
         cart2.removeChild(items[0]);
         alert("Products:"+cart2.length);
        }


        function myShowElementsButton(event)
        {
         var cart2 = document.querySelectorAll("section.cart ul li");
         var str = "";
         for (var i=0;i<cart2.length;i++)
           str+= cart2[i]+"\n";
         alert("Products:"+cart2.length+"\n"+str);

        }
    </script>












</head>
<body>
    <div id="page"> 
        <section id="cart" class="cart">
            <h1>Shopping Cart</h1>
            <ul>
            </ul>

        </section>
        <input type="button" onclick="myClearButton()" value="Clear List" />
        <input type="button" onclick="myShowElementsButton()" value="Show List" />

        <section id="products" class="products">
            <h1>Product List</h1>
            <ul>
            <li id="product-1"  draggable="true"><span>Product 1</span></li>
            <li id="product-2"  draggable="true"><span>Product 2</span></li>
            <li id="product-3"  draggable="true"><span>Product 3</span></li>
            <li id="product-4"  draggable="true"><span>Product 4</span></li>
            <li id="product-4"  draggable="true"><span>Product 4</span></li>
            <li id="product-4"  draggable="true"><span>Product 4</span></li>
            <li id="product-5"  draggable="true"><span>Product 5</span></li>
            <li id="product-6"  draggable="true"><span>Product 6</span></li>


            <li id="product-7"  draggable="true"><span>Product 7</span></li>
                </ul>
            </section>
        </div>  


    </body></html>

Answer 1

这可能会有所帮助：

http://www.html5rocks.com/en/tutorials/dnd/basics/

希望这有帮助。

P.S：，因为你可以让它刷新页面。

在HTML中拖动单词

1 个答案: