Are you trying to add drag and drop feature to your website like Google Plus ? then you are at right place .You can add drag and drop feature by using JQuery and Jquery UI.
Follow these steps to make element draggable and dropable.
1.Add Jquery and Jquery UI plugin to your page into head section(between<head> and </head>) of your page-
<script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
2.If you have divisions like this and you want to make ID MyDrag to draggable and MyDrop to droppable-
<div id="MyDrag"> <p>This division is Draggable</p> </div> <div id="MyDrog"><p>This division is Droppable</p></div>
3.Now add the following javascript code-
<script>$(function() {$( "#Mydrag" ).draggable();});
$(function() {$( "#Mydrag" ).draggable();$( "#MyDrop" ).droppable({drop: function( event, ui ) {$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Element is Dropped!" );}});});
</script>4.After Completing above three steps your code will look like this-
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>$(function() {$( "#Mydrag" ).draggable();});
$(function() {$( "#Mydrag" ).draggable();$( "#MyDrop" ).droppable({drop: function( event, ui ) {$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Element is Dropped!" );}});});
</script>
</head>
<body>
<div id="MyDrag">
<p>This division is Draggable</p>
</div>
<div id="MyDrog"><p>This division is Droppable</p></div>
</body>
</html>
The post How to add Drag and Drop feature to your website appeared first on .