如何从拖放菜单中删除项目

时间:2019-02-02 23:45:24

标签: javascript html drag-and-drop shopping-cart

我正在尝试将“删除”按钮功能添加到拖放式购物车中。我已将按钮放在适当的位置,但无法调用似乎有效的函数。我是新手。

我不确定是否应该显示该功能,因为该列表是通过拖放菜单创建的

下面是到目前为止的代码-非常感谢您的帮助 谢谢

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>HTML 5 Drag and Drop Shopping Cart</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">	
    	
    	<style>
            .products1 { grid-area: products1; }
              .menu1 { grid-area: menu1; }
              .menu2 { grid-area: menu2; }
              .menu3 { grid-area: menu3; }
              .menu4 { grid-area: menu4; }
    
            .grid-container {
             display: grid;
             grid-template-areas:
             'products1 menu1 menu2 menu3 menu4'
              ;
              grid-gap: 5px;
              background-color: #2196F3;
              padding: 5px;
              
      
    }
    
    .grid-container > div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 20px;
    }
    
    #item-container{
      width: 280px;
      padding: 10px;
      border: 5px solid gray;
      margin:20px auto;
      text-align: center;
      font-size: 20px;
    }
    
    
    		ul, li{
    			list-style: none;
    			margin: 2px;
    			padding: 0px;
    			cursor: grabbing;
    		}
    		section#cart ul{
    			height: 600px;
    			overflow: auto;
    			background-color: #cccccc;
    		}
    	</style>
        <script src="jquery-3.3.1.min.js"></script>
    	<script>
        
    		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;
    				
    			var items = document.querySelectorAll("section.products ul li");
    			var cart = document.querySelectorAll("#cart ul")[0];
    			
    			function updateCart(){
    				var total = 0;
                    var term = 48;
                    var rate = 7;
                    var amount = 15090;
    				var cart_items = document.querySelectorAll("#cart ul li")
    				for (var i = 0; i < cart_items.length; i++) {
    					var cart_item = cart_items[i];
    					var quantity = cart_item.getAttribute('data-quantity');
    					var price = cart_item.getAttribute('data-price');
    					var payment = amount*((((rate/12)/100)*((1+((rate/12)/100))**term))/(((1+((rate/12)/100))**term)-1));
    					var sub_total = parseFloat(quantity * parseFloat(price));
    					cart_item.querySelectorAll("span.sub-total")[0].innerHTML =  + sub_total.toFixed(2);
    					
    					total += sub_total*((((rate/12)/100)*((1+((rate/12)/100))**term))/(((1+((rate/12)/100))**term)-1));
                        newpayment=total+payment
                       
                        
                        
    				}
    				
    				document.querySelectorAll("#cart span.total")[0].innerHTML = total.toFixed(2);
                    document.querySelectorAll("#cart span.newpayment")[0].innerHTML = newpayment.toFixed(2);
                                    
                                    
    			}
    			
    			function addCartItem(item, id) {
    				var clone = item.cloneNode(true);
    				clone.setAttribute('data-id', id);
    				clone.setAttribute('data-quantity', 1);
    				clone.removeAttribute('id');
    				
    				var fragment = document.createElement('span');
    				fragment.setAttribute('class', 'quantity');
    				fragment.innerHTML = '<button id="butt" onclick="one(this);">delete item</button>&nbsp;&nbsp;&nbsp;$';
    				clone.appendChild(fragment);	
    				
    				fragment = document.createElement('span');
    				fragment.setAttribute('class', 'sub-total');
    				clone.appendChild(fragment);					
    				cart.appendChild(clone);
                    
                 
               
    			}
                
              
    			
    			
    			function updateCartItem(item){
    				var quantity = item.getAttribute('data-quantity');
    				quantity = parseInt(quantity) + 1
    				item.setAttribute('data-quantity', quantity);
    				var span = item.querySelectorAll('span.quantity');
    				span[0].innerHTML = ' x ' + quantity;
                    
    			}
                
                
               
    			
    			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 + "']");
    				
    				 {
    					addCartItem(item, id);
    				}
    				
                    
    				updateCart();
    				
    				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);
    			};
    		});
            
         
    
    	</script>
    </head>
    <body>
        <div id="page">	
        <div class="grid-container">
         
          <div class="products1">
    		<section id="products" class="products">
    			<h1></h1>
    			<ul>
    				<li id="product-1" data-price="3999.00"><div id="item-container">Product 1<br> descr<br>descr </div></li>
    				<li id="product-2" data-price="1895"><div id="item-container">Product 2<br> descr<br>descrip</div></li>
    				<li id="product-3" data-price="2.99"><span>Product 3</span></li>
    				<li id="product-4" data-price="3.50"><span>Product 4</span></li>
    				<li id="product-5" data-price="4.25"><span>Product 5</span></li>
    				<li id="product-6" data-price="6.75"><span>Product 6</span></li>
    				<li id="product-7" data-price="1.99"><span>Product 7</span></li>
    			</ul>
    		</section>
            </div>
            <div class="menu1">
    		<section id="cart" class="shopping-cart">
    			<h1>Preferred</h1>
    			<ul>
    			</ul>
    			<p> $<span class="total">0.00</span></p>
                <p> $<span class="newpayment">0.00</span></p>
                </section>
          </div>
          <div class="menu2">
    		<section id="cart" class="shopping-cart">
    			<h1>Value</h1>
    			<ul>
    			</ul>
    			<p> $<span class="total">0.00</span></p>
    		</section>
          </div>
           <div class="menu3">
    		<section id="cart" class="shopping-cart">
    			<h1>Basic</h1>
    			<ul>
    			</ul>
    			<p> $<span class="total">0.00</span></p>
    		</section>
          </div>
          <div class="menu4">
    		<section id="cart" class="shopping-cart">
    			<h1>Economy</h1>
    			<ul>
    			</ul>
    			<p> $<span class="total">0.00</span></p>
    		</section>
          </div>
          </div>
            </div>
    </body>
    </html>

0 个答案:

没有答案