In this article I will discuss the creation of an application that can be used to shop online , application or project that will be made is the drag and drop method a product to the shopping cart .




To build this project then we need is jquery , jquery ui and bootstrap . to get it you can directly download on their official website .

Once you get jquery , jquery ui and bootstrapping , then extract the plugins are downloaded and copied to the project folder along with the making of the project folder , so neat as shown below .




Make a new HTML document index.html in the folder and then paste syntax is below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta <span id="IL_AD11" class="IL_AD">charset</span>="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sopping Cart Template</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jquery-ui.min.css" rel="stylesheet">
    <style>
      #product { float: left; width: 100%; min-height: 15em; }
      .product.custom-state-active { background: #eee; }
      .product li { float: left; width: 120px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
      .product li h5 { margin: 0 0 0.4em; cursor: move; }
      .product li a { float: right; }
      .product li a.ui-<span id="IL_AD9" class="IL_AD">icon</span>-zoomin { float: left; }
      .product li img { width: 100%; cursor: move; }
      #shopping { float: right; width: 100%; min-height: 18em; padding: 1%; }
      #shopping h4 { line-height: 16px; margin: 0 0 0.4em; padding: 0.4em;}
      #shopping h4 .ui-icon { float: left; }
      #shopping .product h5 { display: none; }
    </style>
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <p>
</p>
    <div class="<span id="IL_AD4" class="IL_AD">container</span>">
      <div class="row">
 <div class="col-xs-12 col-sm-6 col-md-8">
    
   <div class="ui-widget ui-helper-clearfix">
     <ul id="product" class="product ui-helper-reset ui-helper-clearfix">
       <li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">SmartPhone 1</h5>
  <img src="images/1.png" alt="SmartPhone 1" width="96" height="72">
       </li>
       <li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">SmartPhone 2</h5>
  <img src="images/2.png" alt="SmartPhone 2" width="96" height="72">
       </li>
       <li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">SmartPhone 3</h5>
  <img src="images/3.png" alt="SmartPhone 3" width="96" height="72">
       </li>
       <li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">SmartPhone 4</h5>
  <img src="images/4.png" alt="SmartPhone 4" width="96" height="72">
       </li>
       <li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">SmartPhone 5</h5>
  <img src="images/5.png" alt="SmartPhone 5" width="96" height="72">
       </li>
       <li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">SmartPhone 6</h5>
  <img src="images/6.png" alt="SmartPhone 6" width="96" height="72">
       </li>
       <li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">SmartPhone 7</h5>
  <img src="images/1.png" alt="SmartPhone 7" width="96" height="72">
       </li>
       <li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">SmartPhone 8</h5>
  <img src="images/2.png" alt="SmartPhone 8" width="96" height="72">
       </li>
       <li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">SmartPhone 9</h5>
  <img src="images/3.png" alt="SmartPhone 9" width="96" height="72">
       </li>
       <li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">SmartPhone 10</h5>
  <img src="images/4.png" alt="SmartPhone 10" width="96" height="72">
       </li>
       <li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">SmartPhone 11</h5>
  <img src="images/5.png" alt="SmartPhone 11" width="96" height="72">
       </li>
       <li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">SmartPhone 12</h5>
  <img src="images/6.png" alt="SmartPhone 12" width="96" height="72">
       </li>
     </ul>
   </div>
  
 </div>
 <div class="col-xs-12 col-sm-6 col-md-4">
   <div id="shopping" class="ui-widget-content ui-state-default">
     <h4 class="ui-widget-header"> Sopping Cart</h4>
   </div>
 </div>
      </div>
    </div>
 
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script>
      $(function() {
 // there's the product and <span id="IL_AD8" class="IL_AD">the shopping</span>
 var $product = $( "#product" ),
 $shopping = $( "#shopping" );
 // let the product items be draggable
 $( "li", $product ).draggable({
   cancel: "a.ui-icon", // clicking an icon won't initiate dragging
   revert: "invalid", // when not dropped, the item will revert back to its initial position
   containment: "document",
   helper: "clone",
   cursor: "move"
 });
 // let the shopping be droppable, accepting the product items
 $shopping.droppable({
   accept: "#product > li",
   activeClass: "ui-state-highlight",
   drop: function( event, ui ) {
     deleteImage( ui.draggable );
   }
 });
 // let the product be droppable as well, accepting items from the shopping
 $product.droppable({
   accept: "#shopping li",
   activeClass: "custom-state-active",
   drop: function( event, ui ) {
     recycleImage( ui.draggable );
   }
 });
 // image deletion function
 function deleteImage( $item ) {
   $item.fadeOut(function() {
     var $list = $( "ul", $shopping ).length ? $( "ul", $shopping ) : $( "<ul class='product ui-helper-reset'/>" ).appendTo( $shopping );
     $item.find( "a.ui-icon-shopping" ).remove();
     $item.appendTo( $list ).fadeIn(function() {
       $item.animate({ width: "48px" }).find( "img" ).animate({ height: "36px" });
     });
   });
 }
 // image recycle function
 function recycleImage( $item ) {
   $item.fadeOut(function() {
     $item.find( "a.ui-icon-refresh" ).remove().end().css( "width", "120px").find( "img" ).css( "height", "72px" ).end().appendTo( $product ).fadeIn();
   });
 }
 // resolve the <span id="IL_AD10" class="IL_AD">icons</span> behavior with event delegation
 $( "ul.product > li" ).click(function( event ) {
   var $item = $( this ),
   $target = $( event.target );
   if ( $target.is( "a.ui-icon-shopping" ) ) {
     deleteImage( $item );
   } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
     viewLargerImage( $target );
   } else if ( $target.is( "a.ui-icon-refresh" ) ) {
     recycleImage( $item );
   }
   return false;
 });
      });
    </script>
  </body>
</html>


Explanation :

1. The first stage is to create an html document with guidelines from the bootstrap .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19