[关闭]
@xunuo 2018-08-20T11:40:26.000000Z 字数 3123 阅读 861

拖动制作简易购物车

前端

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
  7.         <title>拖动制作简易购物车</title>
  8.         <link rel="stylesheet" type="text/css" href="../css/easyui.css">
  9.         <link rel="stylesheet" type="text/css" href="../css/icon.css">
  10.         <script src="../js/jquery.min.js" type="text/javascript"></script>
  11.         <script src="../js/jquery.easyui.min.js" type="text/javascript"></script>
  13.         <style>
  14.             ul{
  15.                 width: 100%;
  16.                 height: 40em;
  17.                 margin-left: 10em;
  18.             }
  19.             img{
  20.                 width: 20em;
  21.                 height: 20em;
  22.                 border-radius: 10em;
  23.                 text-align: center;
  24.             }
  25.             li{
  26.                 list-style: none;
  27.                 width: 22em;
  28.                 float: left;
  29.                 margin: 1em;
  30.                 border: 3px solid #000000;
  31.             }
  32.             p{
  33.                 text-align: center;
  34.                 height: 20px;
  35.                 border-bottom: 1px dashed #919191;
  36.             }
  37.             #shopping{
  38.                 width: 60em;
  39.                 height: 30em;
  40.                 margin-left: 40em;
  41.                 border: 3px solid #000000;
  42.             }
  43.             #book-name,#number,#price{
  44.                 width: 20em;
  45.                 height: 2em;
  46.                 font-weight: 2em;
  47.                 float: left;
  48.             }
  49.             .book-name,.number,.price{
  50.                 width: 20em;
  51.                 height: 2em;
  52.                 float: left;
  53.             }
  54.             #sum-money{
  55.                 float: right;
  56.             }
  57.         </style>
  59.     </head>
  61.     <body style="font-size: 10px;width: 1500px;">
  62.         <ul>
  63.             <li draggable="true">
  64.                 <img src="../img/1.png"/>
  65.                 <p>HTML5从入门到精通</p>
  66.                 <p>40$</p>
  67. 			</li>
  68. 			<li draggable="true">
  69. 				<img src="../img/2.png"/>
  70. 				<p>HTML5与CSS3从入门到精通</p>
  71. 				<p>65$</p>
  72.             </li>
  73.             <li draggable="true">
  74.                 <img src="../img/3.png"/>
  75.                 <p>深入浅出HTML5编程</p>
  76.                 <p>45$</p>
  77. 			</li>
  78. 			<li draggable="true">
  79. 				<img src="../img/4.png"/>
  80. 				<p>HTML5实例经典</p>
  81. 				<p>50$</p>
  82.             </li>
  83.             <li draggable="true">
  84.                 <img src="../img/5.png"/>
  85.                 <p>HTML5高级程序设计</p>
  86.                 <p>40$</p>
  87.             </li>
  88.         </ul>
  90.         <div id="shopping">
  91.             <p> 
  92.                 <span id="book-name">书名</span> 
  93.                 <span id="price">单价</span>
  94.                 <span id="number">数量</span>
  95.             </p>
  96.         </div>
  97.         <script>
  98.             window.onload=function(){
  100.                 var onLi=document.getElementsByTagName('li');//书籍列表
  101.                 var onShopping=document.getElementById('shopping');//购物车div
  102.                 var sumMoney=0;//总价
  103.                 var tempMoney=0;//临时记录money
  104.                 var shoppingObj={};//用于判断该书籍是否加入购物车
  105.                 for(var i=0;i<onLi.length;i++){
  106.                     onLi[i].ondragstart=function(e){//拖动时
  107.                         var onP=this.getElementsByTagName('p');
  108.                         e.dataTransfer.setData('name',onP[0].innerHTML);//拖动的元素
  109.                         e.dataTransfer.setData('price',onP[1].innerHTML);
  110.                         e.dataTransfer.setDragImage(this,0,0);
  111.                     }
  112.                 }
  113.                 onShopping.ondragover=function(e){//放置到何处，改变默认不能放置的处理方式
  114.                     e.preventDefault();
  115.                 }
  117.                 onShopping.ondrop=function(e){//放置被拖动元素时
  118.                     e.preventDefault();
  119.                     var onName=e.dataTransfer.getData('name');
  120.                     var onPrice=e.dataTransfer.getData('price');
  121.                     console.log(onName);
  122.                     if(!shoppingObj[onName]){
  124.                         var onP=document.createElement('p');
  125.                         var onSpan1=document.createElement('span');
  126.                         var onSpan2=document.createElement('span');
  127.                         var onSpan3=document.createElement('span');
  129.                         onSpan1.className='book-name';
  130.                         onSpan1.innerHTML=onName;
  132.                         onSpan2.className='price'
  133.                         onSpan2.innerHTML=onPrice;
  135.                         onSpan3.className='number';
  136.                         onSpan3.innerHTML=1;
  138.                         onP.appendChild(onSpan1);
  139.                         onP.appendChild(onSpan2);
  140.                         onP.appendChild(onSpan3);
  142.                         onShopping.appendChild(onP);
  144.                         shoppingObj[onName]=1;
  145.                     }else{
  146.                         var tempName=document.getElementsByClassName('book-name');
  147.                         var tempNumber=document.getElementsByClassName('number');
  148.                         for(var i=0;i<tempName.length;i++){
  149.                             if(tempName[i].innerHTML==onName){
  150.                                 tempNumber[i].innerHTML=parseInt(tempNumber[i].innerHTML)+1;
  151.                             }
  152.                         }
  153.                     }
  154.                     if(!sumMoney){
  155.                         sumMoney=document.createElement('div');
  156.                         sumMoney.id='sum-money';
  157.                     }
  158.                     tempMoney+=parseInt(onPrice);
  159.                     sumMoney.innerHTML="总价："+tempMoney+'$';
  160.                     onShopping.appendChild(sumMoney);
  161.                 }
  162.             }
  163.         </script>
  164.     </body>
  166. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注