javascript - Jquery Drag and Drop to change div content - Stack Overflow

admin2025-04-26 9

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>

Share Improve this question asked Mar 14, 2013 at 16:35 Blake Loizides 9852 gold badges20 silver badges44 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

Using 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);
}

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745661921a312795.html

javascriptJquery Drag and Drop to change div contentStack Overflow

最新回复(0)