Drag and Drop div using php with jquery
|
10:05 |
No Comments |
In this tutorial, we are learning that how to drag and drop div in php.
Many IDE provides drag and drop components facility to easily use for user. But , in web application we must use coding to drag and drop div or components.
With this example, you can easily dragging and dropping components like Visual Studio , Android Studio, etc.
To run this example , we require some jquery file and css file to run this code. we are giving link at the end to download these file.
These dragging and dropping facility is based on jquery code . which is mentioned here :
Using this script, we can drag and drop div. There are two main method is used which is draggable() and droppable(). These two methods will be used in .js file. There are also two class used for div. One is #draggable and #droppable.
Now Let's see the code of the example :
Output :
Download JS and CSS File : Click Here
Many IDE provides drag and drop components facility to easily use for user. But , in web application we must use coding to drag and drop div or components.
With this example, you can easily dragging and dropping components like Visual Studio , Android Studio, etc.
To run this example , we require some jquery file and css file to run this code. we are giving link at the end to download these file.
These dragging and dropping facility is based on jquery code . which is mentioned here :
1 2 3 4 5 6 7 8 9 10 11 12 | $( function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); } ); |
Using this script, we can drag and drop div. There are two main method is used which is draggable() and droppable(). These two methods will be used in .js file. There are also two class used for div. One is #draggable and #droppable.
Now Let's see the code of the example :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Draggable - Droppable Demo</title> <link rel="stylesheet" href="jquery-ui.css" /> <script src="jquery.js"></script> <script src="jquery-ui.js"></script> <style> #draggable { background-color:black; width: 100px; height: 30px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { background-color:green; width: 450px; height: 450px; 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" style="color:white"> </div> <div id="droppable"> </div> |
Output :
Download JS and CSS File : Click Here
Drag and drop div, Drag and Drop in Php, draggable, droppable, How to drag and drop components in web application, jquery drag and drop, Php Tutorial
0 comments:
Post a Comment