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
Template Megadeal of MooZiiCart for creating websites to sell products online
By prmindphp Fri 03 Apr 2020 6:45 pm Board English Language
0
5
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
112
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
82
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
78
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
1802
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
470
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
465
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
555
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
469
Wed 08 Jan 2020 6:51 pm By prmindphp
Fix Gmail Error 404 By Taking Gmail Help Quickly
By Anonymous Wed 08 Jan 2020 2:56 pm Board English Language
0
475
Wed 08 Jan 2020 2:56 pm By Anonymous
How To Add New Facebook Friends using Facebook Phone Number?
By Anonymous Tue 07 Jan 2020 4:20 pm Board English Language
0
468
Tue 07 Jan 2020 4:20 pm By Anonymous
DBA Training Institute
By Shrutiii Wed 01 Jan 2020 3:06 pm Board English Language
0
508
Wed 01 Jan 2020 3:06 pm By Shrutiii
Tools for calculating the withholding tax easily reduce large tax
By prmindphp Wed 25 Dec 2019 6:56 pm Board English Language
0
487
Wed 25 Dec 2019 6:56 pm By prmindphp
Helper to calculate interest rates for investors
By prmindphp Tue 24 Dec 2019 6:52 pm Board English Language
0
527
Tue 24 Dec 2019 6:52 pm By prmindphp
Plan your savings easily with FV (Future Value) Calculator
By prmindphp Mon 23 Dec 2019 7:28 pm Board English Language
0
462
Mon 23 Dec 2019 7:28 pm By prmindphp
Payment Calculator, Installment calculation to make decisions
By prmindphp Fri 20 Dec 2019 6:00 pm Board English Language
0
504
Fri 20 Dec 2019 6:00 pm By prmindphp
Program Calculate Home Loan, Tools that will help you calculate home loans easily and quickly
By prmindphp Thu 19 Dec 2019 6:59 pm Board English Language
0
528
Thu 19 Dec 2019 6:59 pm By prmindphp
The website loads slowly ? The image size is not proportional, MImageoptimize Plugin of Joomla can help
By prmindphp Tue 17 Dec 2019 7:05 pm Board English Language
0
505
Tue 17 Dec 2019 7:05 pm By prmindphp
Calculation program Number of Periods (NPER)
By prmindphp Mon 16 Dec 2019 7:21 pm Board English Language
0
574
Mon 16 Dec 2019 7:21 pm By prmindphp
Calculation program after including VAT
By prmindphp Fri 13 Dec 2019 5:32 pm Board English Language
0
715
Fri 13 Dec 2019 5:32 pm By prmindphp