I have 2 draggable div's in a html document and I have 1 droppable div next to the 2 draggable one's.
When you drag one of the draggable div's onto the droppable div the droppable div shows some text and the draggable div reverts back to where is was.
My question is how can I change the text in the droppable div according to the which draggable div I have dropped onto the droppable div?
I hope this makes sense, below is my code.
Many thanks
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Revert draggable position</title>
<link rel="stylesheet" href=".10.1/themes/base/jquery-ui.css" />
<script src=".9.1.js"></script>
<script src=".10.1/jquery-ui.js"></script>
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#draggable, #draggable1 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#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">
<p>I revert when I'm dropped</p>
</div>
<div id="draggable1" class="ui-widget-content">
<p>I revert when I'm dropped</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop me here</p>
</div>
</body>
</html>
I have 2 draggable div's in a html document and I have 1 droppable div next to the 2 draggable one's.
When you drag one of the draggable div's onto the droppable div the droppable div shows some text and the draggable div reverts back to where is was.
My question is how can I change the text in the droppable div according to the which draggable div I have dropped onto the droppable div?
I hope this makes sense, below is my code.
Many thanks
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Revert draggable position</title>
<link rel="stylesheet" href="http://code.jquery./ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery./jquery-1.9.1.js"></script>
<script src="http://code.jquery./ui/1.10.1/jquery-ui.js"></script>
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#draggable, #draggable1 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#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">
<p>I revert when I'm dropped</p>
</div>
<div id="draggable1" class="ui-widget-content">
<p>I revert when I'm dropped</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop me here</p>
</div>
</body>
</html>
2 Answers
Reset to default 3Using the example you provided, try this:
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( ui.draggable[0].id );
}
});
});
DEMO: http://jsfiddle/dirtyd77/SLGdE/23/
You can get the id of the draggable element (the dragged element) from the ui object like so:
drop: function( event, ui ) {
ui.draggable[0].id
}
Fiddle
Your full drop callback would look like this in your example:
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped! " + ui.draggable[0].id);
}