Drag and Drop using jQuery Plugin

[soulaymane123]

In this tutorial, we have an example of a source code for the Drag and Drop using jQuery Plugin. In this example, we need a jQuery plugin to have a function of drag and drop. We are going to use the draggable() function to move the selected element that we have in the web page.

You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

⚙ Live Demo

Create Draggable UI Element

We have five examples element to be draggable on the web page.

1. <img
   
   src
   
   =
   
   "1.png"
   
   id
   
   =
   
   "image_drag_1"
   
   class
   
   =
   
   "img-style"
   
   /
   
   >
   
2. <img
   
   src
   
   =
   
   "2.png"
   
   id
   
   =
   
   "image_drag_2"
   
   class
   
   =
   
   "img-style"
   
   /
   
   >
   
3. <img
   
   src
   
   =
   
   "3.png"
   
   id
   
   =
   
   "image_drag_3"
   
   class
   
   =
   
   "img-style"
   
   /
   
   >
   
4. <img
   
   src
   
   =
   
   "4.png"
   
   id
   
   =
   
   "image_drag_4"
   
   class
   
   =
   
   "img-style"
   
   /
   
   >
   
5. <img
   
   src
   
   =
   
   "5.png"
   
   id
   
   =
   
   "image_drag_5"
   
   class
   
   =
   
   "img-style"
   
   /
   
   >
   

Kindly copy and paste this link to the HEAD tag of your web page.

1. <script
   
   src
   
   =
   
   "jquery-1.9.1.js"
   
   ></
   
   script
   
   >
   
2. <script
   
   src
   
   =
   
   "jquery-ui.js"
   
   ></
   
   script
   
   >
   

jQuery Draggable() Function

We are going to use the draggable() function with the corresponding ID of the image element that we have in the web page. Using this function we can drag and drop the image element in the web page.

1. <
   
   script>
   
2. $(
   
   function
   
   (
   
   )
   
   {
   
3. $(
   
   "#image_drag_1"
   
   )
   
   .draggable
   
   (
   
   )
   
   ;
   
4. }
   
   )
   
   ;
   
5. 
   
6. $(
   
   function
   
   (
   
   )
   
   {
   
7. $(
   
   "#image_drag_2"
   
   )
   
   .draggable
   
   (
   
   )
   
   ;
   
8. }
   
   )
   
   ;
   
9. 
   
10. $(
    
    function
    
    (
    
    )
    
    {
    
11. $(
    
    "#image_drag_3"
    
    )
    
    .draggable
    
    (
    
    )
    
    ;
    
12. }
    
    )
    
    ;
    
13. 
    
14. $(
    
    function
    
    (
    
    )
    
    {
    
15. $(
    
    "#image_drag_4"
    
    )
    
    .draggable
    
    (
    
    )
    
    ;
    
16. }
    
    )
    
    ;
    
17. 
    
18. $(
    
    function
    
    (
    
    )
    
    {
    
19. $(
    
    "#image_drag_5"
    
    )
    
    .draggable
    
    (
    
    )
    
    ;
    
20. }
    
    )
    
    ;
    
21. </
    
    script>
    

Output

⚙ Live Demo

For the full source code, kindly click the "Download Code" button below.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download