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
704
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
238
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
221
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
246
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
236
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
296
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
263
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
246
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
235
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
274
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
275
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
433
Fri 03 Apr 2020 6:45 pm By prmindphp
[MooZiiCart] [Module] Displaying products that customers are interested by Wishlist Module
By prmindphp Fri 27 Mar 2020 5:46 pm Board English Language
0
643
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
439
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
540
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
3132
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
898
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
932
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
1180
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
913
Wed 08 Jan 2020 6:51 pm By prmindphp