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

拖动制作简易购物车

前端


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