Hi, folks!

 

I'm Charles, new to this community, just thought I'd stop here to say "Hi" first and introduce myself as a newcomer to the platform.
I created a Drag & Drop Shopping Cart Component  using jQuery and thought it would be a good idea to create a guide for implementing Drag & Drop functionality.

 
1)      Create a new Web Screen
 
2)      Add the following CSS  to the Web Screen

.Item{width:150px;height:150px;background:blue;}  
.Dropzone{margin:50px 0 0 0; width:400px; height:400px; background:#e3e3e3;}
.Item > input{display:none;}

 
3)      Drag two Containers (each after the other without spaces or line breaks) on the screen.
 
4)      Apply CSS Style Item, to the First Container. Apply Style Class Dropzone, to the second container
         

         Now that we have 2 Containers blue (Item) and grey (Dropzone)
         The blue container will be draggable and the grey container will be droppable

5)      Download the latest  compressed production version of jQuery from https://jquery.com/download/
          Open jquery-(version).min.js in notepad 
 
6)      Download the latest Custom version of jQuery UI from https://jqueryui.com/download/
         Make sure you only select the Core, Widget,  Mouse , Draggable and Droppable checkboxes
         
          Extract the zip file and open  jquery-ui-(version).custom.min.js  in notepad
       

7)      Open the JavaScript property of the Web Screen
         


8)      Copy the content from  jquery-(version).min.js  & jquery-ui-(version).custom.min.js
         into the Web Screen’s JavaScript property
        
  
9)      Drag  a Button to the Blue Container (Item1).
        Set the Button’s Label to “Click me” and Method to Ajax.
        (The Button will be hidden at runtime because of the css property that we added earlier.)

 
10)   Create a new Screen Action for this Button
       
 
11)   Drag an Expression to the end of the page set the Escaped Content property to No
 
12)   Add the Following Script to the Expression

var item = ui.draggable.find('input');
item.click();