In this article we will discuss to drag and drop image in the widget using dragable and droppable properties in jQuery ui. While drag is in process, a function is used to call it will nofiy the status of the dragged image. We have set opacity by using css() method. Run the page and drag and drop image on to droppable panel.
Example:
<html>
<head>
<title>Drag and drop image to the widget in jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
$(".target").css({ opacity: "0.4" });
$("#drag").draggable({ zIndex: 3 });
$(".target").droppable({
drop: dropCallback,
greedy: true
});
function dropCallback(e) {
var message = $("<p></p>", {
id: "message",
text: "you have dropped in to " + e.target.id + " panel"
});
$("#status").empty().append(message);
}
});
</script>
<style type="text/css">
#drag {
width: 114px;
height: 114px;
margin-bottom: 5px;
cursor: move;
background: url(http://www.infinetsoft.com/Uploads/20160523103730logosmall.png) no-repeat;
float: left;
}
#outer {
width: 500px;
height: 300px;
border: 1px solid #D0C4C4;
float: right;
background-color: #FF5722;
}
#inner {
width: 100px;
height: 100px;
border: 3px solid #000;
position: relative;
top: 100px;
left: 200px;
background-color: #FFFF99;
}
#status {
width: 500px;
border: 1px solid #D0C4C4;
float: right;
clear: right;
color: #AD2525;
height: 40px;
font-size: 30px;
}
#message {
margin: 0px;
font-size: 80%;
}
</style>
</head>
<body>
<div id="drag"></div>
<div class="target" id="outer">
<div class="target" id="inner"></div>
</div>
<div id="status">Drag and drop the image in to the widget</div>
</body>
</html>
Output:
Before dragged in to panel:
after dropped in to panel:
Post your comments / questions
Recent Article
- How to decode HTML character code in c#?
- How to save the xml file to a particular location?
- How to use if else statement in c++?
- How to use godaddy domain name with another godaddy hosting account?
- Restore of database 'DATABASE' failed. (Microsoft.SqlServer.Management.RelationalEngineTasks)
- How to programmatically modifying the AppSetting value in web.config using c#?
- TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined
- How to calculate the age from jQuery ui datepicker using c#?
Related Article