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
Business Analyst Training
By NehaaB Fri 29 Nov 2019 5:27 pm Board English Language
0
169
Fri 29 Nov 2019 5:27 pm By NehaaB
Program convert area
By prmindphp Wed 27 Nov 2019 11:26 am Board English Language
0
185
Wed 27 Nov 2019 11:26 am By prmindphp
Program exchange rate - Information form Bank of Thailand API
By prmindphp Tue 26 Nov 2019 2:34 pm Board English Language
0
150
Tue 26 Nov 2019 2:34 pm By prmindphp
Tracking Thailand Post Program
By prmindphp Mon 25 Nov 2019 5:47 pm Board English Language
0
216
Mon 25 Nov 2019 5:47 pm By prmindphp
Square Root Calculate Program
By prmindphp Fri 22 Nov 2019 11:30 am Board English Language
0
261
Fri 22 Nov 2019 11:30 am By prmindphp
The program calculates the mean, the variable, the standard deviation
By prmindphp Fri 22 Nov 2019 11:12 am Board English Language
0
224
Fri 22 Nov 2019 11:12 am By prmindphp
Introducing the new Mindphp.com Webboard system function (phpbb v.3.2)
By numtan5839 Tue 19 Nov 2019 6:06 pm Board English Language
0
234
Tue 19 Nov 2019 6:06 pm By numtan5839
The most popular currency pairs in the Forex for new traders
By numtan5839 Mon 18 Nov 2019 5:32 pm Board English Language
0
185
Mon 18 Nov 2019 5:32 pm By numtan5839
BIG DATA and Hadoop
By Inglejyoti Mon 18 Nov 2019 4:03 pm Board English Language
0
317
Mon 18 Nov 2019 4:03 pm By Inglejyoti
The most popular currency in the Forex
By numtan5839 Mon 18 Nov 2019 3:24 pm Board English Language
0
184
Mon 18 Nov 2019 3:24 pm By numtan5839
How to use the SQRT function in Excel
By numtan5839 Mon 18 Nov 2019 2:46 pm Board English Language
0
210
Mon 18 Nov 2019 2:46 pm By numtan5839
Deposit money into account with Thailand Post by Bank@post service
By numtan5839 Mon 18 Nov 2019 11:42 am Board English Language
0
390
Mon 18 Nov 2019 11:42 am By numtan5839
Benefits and applications of moving averages
By numtan5839 Mon 18 Nov 2019 10:47 am Board English Language
0
203
Mon 18 Nov 2019 10:47 am By numtan5839
Moving Average
By numtan5839 Sat 16 Nov 2019 2:45 pm Board English Language
0
250
Sat 16 Nov 2019 2:45 pm By numtan5839
weighted arithmetic mean
By numtan5839 Sat 16 Nov 2019 11:56 am Board English Language
0
215
Sat 16 Nov 2019 11:56 am By numtan5839
Digital Marketing Training in Mumbai
By Kanchaan Fri 15 Nov 2019 6:10 pm Board English Language
1
866
Fri 06 Dec 2019 3:16 pm By benjamin28
Thailand Post appease e-commerce with ePacket service
By numtan5839 Fri 15 Nov 2019 5:59 pm Board English Language
0
329
Fri 15 Nov 2019 5:59 pm By numtan5839
The character that precedes Tracking Number - Thailand Post Track & Trace
By numtan5839 Fri 15 Nov 2019 5:09 pm Board English Language
0
179
Fri 15 Nov 2019 5:09 pm By numtan5839
downloading MD Watermark
By bfred Fri 04 Oct 2019 3:21 pm Board English Language
6
1448
Mon 30 Dec 2019 7:26 pm By mindphp
Features Review : Component Mjform Advance untuk meningkatkan form atau borang untuk laman web dgn lebih baik
By abdkode Mon 22 Apr 2019 6:51 pm Board Bahasa Language
0
9902
Mon 22 Apr 2019 6:51 pm By abdkode