Fastest Web Hosting

jquery drag drop

0 votes
asked Jun 4, 2016 in Jquery by rajatinsa (3,350 points)

I want to implement drag and drop system in admin panal. Can anybody suggest me code or any demo will be appropriable...

1 Answer

0 votes
answered Jun 4, 2016 by Manoj Insan (1,600 points)

Drag & Drop is used by all php cms due to it’s flexibility. Actually this is provided by Jquery. Jquery UI branch gives us to allow drag & drop an any DOM object. Non technical Person can also easily handly any application developed with help of Drag & Drop. For implementation first you include to jquery & jquery UI & Jquery UI CSS. You can direct include these files from google live link or you can just download it from by click here JQuery Ui & JQuery

<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dragable & Dropable Jquery</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style>
#draggable {
    float: left;
    height: 100px;
    margin: 10px 10px 10px 0;
    padding: 0.5em;
    width: 100px;
}
#droppable {
    float: left;
    height: 150px;
    margin: 10px;
    padding: 0.5em;
    width: 150px;
}
</style>
<script>
$(function() {
$( "#draggable" ).draggable({cursor: "move"});
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
Tutorial By <a href="http://live.mzeel.com/technicalsharp/" target="_blank">live.mzeel.com/technicalsharp</a>
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>

Job Board

TechnicalSharp is a technical community of developers where they are sharing their knowledge and solutions and against it they are getting the score point which help them to make profile strong which is under eyes on MNC's
...