JQuery
How to drag and drop image in to the widget using jquery?
By: Mohamed Rasik | May,27 2016 | Css , JQueryIn 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:
