i've tried for several days and i can't get it work. I want to get the id of div ( ui-widget-content
) that is the draggable item, when i dropped and click on the div ( ui-widget-header
) that is the dropped item but i can't get it work.
<script>
$(document).ready(function () {
$("#j1, #j2, #j3, #j4, #j5, #j6").draggable();
$("#p1, #p2, #p3, #p4, #p5, #p6").droppable({
hoverClass: 'ui-state-hover',
helper: 'clone',
cursor: 'move',
drop: function (event, ui) {
$(this).addClass('ui-state-highlight');
$(ui.draggable).addClass('ui-state-highlight');
$(ui.draggable).draggable('enable');
console.log('Dragged: ' + alert(ui.draggable.attr("id")));
}
});
});
$('ui-widget-header').click(function () {
var item_id = ui.item.attr('id');
});
alert('item_id');
//$('.ui-droppable').click(function(){
// var myStringPosition = $('div'); // $(event.target).attr('id');
// $('.ui-droppable').each(function(){
// myStringPosition = $(this)[0].id;
// });
// alert(myStringPosition);
//});
</script>
</head>
<body>
<div id="j1" class="ui-widget-content" data-userid="1">Jogador 1</div>
<div id="j2" class="ui-widget-content">Jogador 2</div>
<div id="j3" class="ui-widget-content">Jogador 3</div>
<div id="j4" class="ui-widget-content">Jogador 4</div>
<div id="j5" class="ui-widget-content">Jogador 5</div>
<div id="j6" class="ui-widget-content">Jogador 6</div>
<div id="p1" class="ui-widget-header"><p>Posicao 1</p></div>
<div id="p2" class="ui-widget-header"><p>Posicao 2</p></div>
<div id="p3" class="ui-widget-header"><p>Posicao 3</p></div>
<div id="p1" class="ui-widget-header"><p>Posicao 4</p></div>
<div id="p2" class="ui-widget-header"><p>Posicao 5</p></div>
<div id="p3" class="ui-widget-header"><p>Posicao 6</p></div>
</body>
</html>
UPDATE 3 : It doesn't look like there is a method to determine which "draggable" item is contained within the droppable. You will have to have a method to remember what was dropped into the container. The data()
function on a jquery object is a good method for this.
In the drop function:
var itemId = $(ui.draggable).attr("id");
$(this).data('dropped', itemId);
In the click callback use:
if ($(item).data('dropped'))
{
alert($(item).data('dropped'));
}
NOTE: This will only remember the most recently dropped item and will not remove it once it's dropped into a new container - that should be straightforward to implement.
UPDATE 2 : The following should provide an alert with the id of the draggable item. I put the conditional in there to determine if it were moved into the container at the bottom.
$('.ui-widget-content').click(function (event) {
var item = event.target;
if (item.offsetTop >= 140)
{
alert(item.id);
}
});
new fiddle: http://jsfiddle.net/KLLCg/7/
UPDATE : It looks like you wanted something different. If you just want the ID of the destination container you should be able to get it using event.target.id
drop: function (event, ui) {
$(this).addClass('ui-state-highlight');
$(ui.draggable).addClass('ui-state-highlight');
$(ui.draggable).draggable('enable');
var itemId = $(ui.draggable).attr("id");
var destId = event.target.id ;
var message = '"' + itemId + '" was dragged to "' + destId + '"';
alert(message);
console.log(message);
}
see updated fiddle: http://jsfiddle.net/KLLCg/6/
ORIGINAL ANSWER
First - you should put your click handler inside the document.ready
. I think you might be having a problem because the event target object will be whatever was clicked and the <p>
element doesn't have an id. If I understand your problem the following code may work.
$('.ui-widget-header').click(function (event) {
var item = event.target;
if (item.nodeName == 'P') {
item = item.parentNode;
}
alert(item.id);
});
jsfiddle example: http://jsfiddle.net/KLLCg/3/
Try this one You just have to store drag object id into "dragId".
<!DOCTYPE html>
<link href='../../css/style.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src = "js/jquery.min.js"></script>
<script type="text/javascript" src = "js/jquery-ui.min.js"></script>
<script type="text/javascript" src = "js/jquery-ui.js"></script>
<head>
<style>
.dragAndDrop
{
}
.dragBoxStyle
{
position:absolute;
left:170px;
top:100px;
}
.dropBoxStyle
{
position:absolute;
left:170px;
top:300px;
}
.dragImageStyle
{
}
.dropImageStyle
{
}
</style>
<script>
var dragId;
$(function()
{
$(".dragImageStyle").draggable();
$(".dragImageStyle").mousedown(function()
{
dragId = (this.id);
});
$( ".dropImageStyle" ).droppable(
{
drop: function( event, ui )
{
alert("Droped on "+this.id+" : "+dragId);
}
});
});
</script>
</head>
<body>
<div id = "dragAndDrop">
<div id = "bg">
<img src = "images/BG.jpg"></img>
<div>
<div id = "dropTiles" class = "dropBoxStyle">
<img id = "drop1" class = "dropImageStyle" src = "images/Tab1_V.jpg"><img>
<img id = "drop2" class = "dropImageStyle" src = "images/Tab2_V.jpg"><img>
<img id = "drop3" class = "dropImageStyle" src = "images/Tab3_V.jpg"><img>
<img id = "drop4" class = "dropImageStyle" src = "images/Tab4_V.jpg"><img>
</div>
<div class = "dragBoxStyle">
<img id = "dragBox1" src = "images/BlankBox.png"><img>
<img id = "dragBox2" src = "images/BlankBox.png"><img>
<img id = "dragBox3" src = "images/BlankBox.png"><img>
<img id = "dragBox4" src = "images/BlankBox.png"><img>
</div>
<div id = "dragTiles" class = "dragBoxStyle">
<img id = "drag1" class = "dragImageStyle" src = "images/Tab1_N.jpg"><img>
<img id = "drag2" class = "dragImageStyle" src = "images/Tab2_N.jpg"><img>
<img id = "drag3" class = "dragImageStyle" src = "images/Tab3_N.jpg"><img>
<img id = "drag4" class = "dragImageStyle" src = "images/Tab4_N.jpg"><img>
</div>
</div>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.