CodePudding user response:

 
 

 
  
<style> 
The cart {
width: 100%; 
height: 200px; 
Border: # 1 px f4f4f4 solid; 
} 

# pl> Div {
width: 100px; 
Border: # 1 px f4f4f4 solid; 
display: inline-block; 
} 

# cart span {
padding: 10px; 
} 

# cart span: : after {
Content: '|'. 
padding-left: 10px; 
} 
</style> 
<script> 
Var cart=[] 
Var list=[{
Id: '001', 
Name: '1' goods, 
Des: 'description 1', 
Price: '100' 
}, 
{
Id: '002', 
Name: '2' goods, 
Des: 'description 2', 
Price: '200' 
}, 
{
Id: '003', 
Name: '3' goods, 
Des: 'description of 3', 
Price: '300' 
}, 
{
Id: '004', 
Name: '4' goods, 
Des: 'description 4', 
Price: '400' 
}, 
{
Id: '005', 
Name: '5' goods, 
Des: 'describe 5', 
Price: '500' 
}, 
] 

The function of $(id) {
Return the document. The getElementById (id) 
} 
Window. The onl oad=function () {
Var el=$(' pl) 
List. The forEach (item=& gt; {
Var p=` & lt; Div ondragstart="drag (event)" draggable="true" id="${item. Id}" & gt; 
 
 
 
 ` 
El. InnerHTML +=p 
}) 
} 

The function drag (e) {
E.d ataTransfer. SetData (" id ", e. arget. Id); 
} 

The function allowDrop (e) {
E.p reventDefault (); 
} 

The function to the add (e) {
E.p reventDefault (); 
Var id=e.d ataTransfer. GetData (" id "); 
//for commodity information 
Var info=list. The filter (item=& gt; {
Return the item. The id===id 
}) 
//determine whether shopping cart has add 
If (cart. Length===0) {
Cart. Push ({
. The info [0], 
Num: 1 
}) 
} else {
Var add=cart. Filter (item=& gt; {
Return the item. The id===id 
}) 
If (add length & gt; 0 {
The add [0]. Num=Number (add [0]. Num) 
The add [0]. Num++ 
} else {
Cart. Push ({
. The info [0], 
Num: 1 
}) 
} 
} 
AddCart () 
} 

The function addCart () {
$(' cart '). InnerHTML='
If (cart) length & gt; 0) 
Cart. ForEach ((item, index)=& gt; {
Var p=` & lt; Div>  The ${item. Id} & lt;/span>  . ${item name} & lt;/span>  The ${item. Num} & lt;/span> 
 The ${item. The item price *. Num} & lt;/span>  
 ` 
$(' cart '). InnerHTML +=p 
}) 
} 

The function del (index) {
Cart. Splice (index, 1) 
The console. The log (cart) 
AddCart () 
} 

The function sum () {
Var sum=0 
Cart. ForEach (item=& gt; {
Sum +=(item. Num * item. Price) 
}) 
$(' sum '). InnerHTML=sum 
} 
</script> 

CodePudding user response: