User Rating: 1 / 5

Star ActiveStar InactiveStar InactiveStar InactiveStar Inactive
 
Jquery drag and drop

In this tutorial you will learn how to create Drag and Drop in JQuery. 

 

Draggable

Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
 <p>Drag me around</p>
</div>

 
</body>
</html>

 

Droppable

Enable any DOM element to be droppable, a target for draggable elements.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Droppable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>
 
 
</body>
</html>
Recent Topics
Subject
Post Reply
Open
Recent
Does MD Watermark work under Joomla 3.9.20?
By Balazs Thu 16 Jul 2020 4:48 pm Board English Language
6
142
Thu 16 Jul 2020 10:31 pm By Balazs
The program calculates the PMT
By prmindphp Wed 20 May 2020 6:45 pm Board English Language
1
126
Thu 21 May 2020 5:57 pm By prmindphp
Helper for calculating NPER values
By prmindphp Tue 19 May 2020 6:55 pm Board English Language
1
101
Thu 21 May 2020 5:59 pm By prmindphp
Program that will be used for home loan calculations
By prmindphp Mon 18 May 2020 6:49 pm Board English Language
1
136
Thu 21 May 2020 6:02 pm By prmindphp
Tools that will help calculate car tax
By prmindphp Thu 14 May 2020 7:00 pm Board English Language
1
112
Fri 15 May 2020 12:03 am By prmindphp
Helper to create slidershow, Module Product Slide of MooZiiCart
By prmindphp Thu 30 Apr 2020 6:32 pm Board English Language
0
128
Thu 30 Apr 2020 6:32 pm By prmindphp
Helper in searching products by category and keywords with Module Ajax Search of MooZiiCart
By prmindphp Tue 28 Apr 2020 6:17 pm Board English Language
0
119
Tue 28 Apr 2020 6:17 pm By prmindphp
Helper to restore the system to clear data, Plugin System MRestore
By prmindphp Fri 24 Apr 2020 7:05 pm Board English Language
0
127
Fri 24 Apr 2020 7:05 pm By prmindphp
Creating social share buttons, share the website's content to Social Media With Plugin Content Msocial
By prmindphp Wed 22 Apr 2020 7:05 pm Board English Language
0
126
Wed 22 Apr 2020 7:05 pm By prmindphp
Create Content Marketing and Product with Content Product Match of MooZiiCart
By prmindphp Tue 21 Apr 2020 7:19 pm Board English Language
0
143
Tue 21 Apr 2020 7:19 pm By prmindphp
Filtering for find the product with Module Filter product of MooZiiCart
By prmindphp Thu 09 Apr 2020 6:51 pm Board English Language
0
134
Thu 09 Apr 2020 6:51 pm By prmindphp
Template Megadeal of MooZiiCart for creating websites to sell products online
By prmindphp Fri 03 Apr 2020 6:45 pm Board English Language
0
319
Fri 03 Apr 2020 6:45 pm By prmindphp
Displaying products that customers are interested by Wishlist Module
By prmindphp Fri 27 Mar 2020 5:46 pm Board English Language
0
526
Fri 27 Mar 2020 5:46 pm By prmindphp
Show the Bestsellers Product by Module Bestseller
By prmindphp Wed 25 Mar 2020 6:04 pm Board English Language
0
339
Wed 25 Mar 2020 6:04 pm By prmindphp
Show Products Category by Module Category
By prmindphp Tue 24 Mar 2020 6:07 pm Board English Language
0
381
Tue 24 Mar 2020 6:07 pm By prmindphp
Plugin System MZC Auto Close to enable the open and close odering system
By prmindphp Wed 19 Feb 2020 6:38 pm Board English Language
0
3028
Wed 19 Feb 2020 6:38 pm By prmindphp
MDPartner Component for store client data in CRM system
By prmindphp Sat 25 Jan 2020 3:04 pm Board English Language
0
802
Sat 25 Jan 2020 3:04 pm By prmindphp
i am looking for help
By Anonymous Tue 14 Jan 2020 5:46 pm Board English Language
1
828
Tue 14 Jan 2020 6:03 pm By noppadonsk
Dot Net Training
By Poonaam Fri 10 Jan 2020 2:20 pm Board English Language
0
1048
Fri 10 Jan 2020 2:20 pm By Poonaam
MDRental, Area management assistant for rental business
By prmindphp Wed 08 Jan 2020 6:51 pm Board English Language
0
803
Wed 08 Jan 2020 6:51 pm By prmindphp