jQuery Drag and Drop List Example

Today, We want to share with you jQuery UI | draggable() and droppable() methods.In this post we will show you how make draggable li element with jquerymobile?, hear for Drag-and-Drop with jQuery we will give you demo and example for implement.In this post, we will learn about Jquery Drag And Drop Draggable Droppable with an example.

Drag and Drop example using jQuery and JavaScript in HTML

here you can learn simple jQuery Drag and Drop Examples with full source code.

Read Also:  Loop Binding in Vue.js With V-for

jQuery Druggable Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>www.pakainfo.com - jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
 
</body>
</html> 

jQuery Droppable Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>www.pakainfo.com - jQuery UI Droppable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <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>

I hope you get an idea about jquery draggable droppable.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  html code for online shopping website

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  jquery Drag and Drop draggable droppable Example
  2. Read Also:  jQuery Disable Button After Click Example
  3. Read Also:  Disable browser back button using jquery
  4. Read Also:  jQuery Remove Item From Comma Separated string
  5. Read Also:  PHP Upload and Crop Image using jQuery Ajax
  6. Read Also:  how to submit a form using ajax without page refresh?
  7. Read Also:  AngularJS Arrays - tips, tricks and examples
  8. Read Also:  Simple Autocomplete Combobox in jQuery
  9. Read Also:  Reset input fields using onchange event in JQuery
  10. Read Also:  Reset input fields using onchange event in JQuery