Implementing Drag & Drop using  jQuery

Implementing Drag & Drop using  jQuery

  
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 http://jquery.com/download/
          Open jquery-(version).min.js in notepad 
 
6)      Download the latest Custom version of jQuery UI from http://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
"<script>
$("".Item"").draggable({
    scroll:false,
   helper:'clone',
    zIndex:9999,
});
 
$("".Dropzone"").droppable({
    tolerance:""touch"",
    drop:function (event, ui) {
        var item = ui.draggable.find('input');
        item.click();
     }
});
</script>"
 
 
13)   The End. Publish and enjoy.



How it works

 
When the Item is dropped, the JavaScript lines
var item = ui.draggable.find('input');
item.click();
 fetch the Button and triggger a click event. 
updated oml file.
Hi Charles,

Welcome to the Community!

Thank you for sharing this detailed tutorial. I'm sure it'll help other folks here and provide you with some feedback as well. Keep it coming!

Cheers!
Nicely done, Charles!
Especially liked the 'self-click-button' design, avoiding a global handler (passing ids, etc).

Cheers,
Paulo Ramos
Hi Charles,

Really cool - congrats on your first post and thanks for taking the time to explain everything in detail. I second Paulo's words about the "self click" implementation, very nice. 

We hope to see more stuff coming with this quality!

Regards,
Gonçalo
Hi Charles,

First of all welcome to the OutSystems community!
Second, congratulations for your Great first post! Really liked how you explained the details on how to do it, very very nice!

Keep it up!

Cheers,
RG
Thanks, everyone for the warm welcome :)
Very nice tutorial :-)
Hi Charles - is the blue box supposed to actually stick when dropped?  For some reason I can click and drag, but it does not remove the original box and does not stick in the dropped-to location.  Thanks!
Hi Doug,

This is the intended behaviour, one can drag the blue box and drop it onto the gray box. the original blue box will always remain in its place. The system can detect and handle dropped events (the feedback message).
This type of scenario could be used for a building shopping cart, where the blue box is a product and the gray box is a shopping cart. 

you could see a working implementation by downloading the jQuery Drag Drop Shopping Cart 
component here
http://www.outsystems.com/Forge/393/drag-drop-shopping-cart/

Hello Charles!
Thanks for your share, very cool and well explained... I implemented on my espace Drag and Drop with cart shopping and works well :)

But i don't understund one thing... How when i dragging one item he takes the ID of the Product??
I'm curious about this question.

Best Regards