admin管理员组

文章数量:1026989

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>
  • javascript
  • jquery
  • html
  • drag-and-drop
Share Improve this question asked Mar 14, 2013 at 16:35 Blake LoizidesBlake Loizides 9852 gold badges20 silver badges44 bronze badges
Add a ment  | 

2 Answers 2

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

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>
  • javascript
  • jquery
  • html
  • drag-and-drop
Share Improve this question asked Mar 14, 2013 at 16:35 Blake LoizidesBlake Loizides 9852 gold badges20 silver badges44 bronze badges
Add a ment  | 

2 Answers 2

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

本文标签： javascriptJquery Drag and Drop to change div contentStack Overflow

版权声明：本文标题：javascript - Jquery Drag and Drop to change div content - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745661917a2161942.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。