我已经尝试了好几天了，但无法正常工作。
当我放下并单击 div (ui-widget-header) 时，我想获取可拖动项目的 div (ui-widget-content) 的 id这是掉落的元素，但我无法让它工作。
<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>
最佳答案
更新3:看起来没有一种方法可以确定可放置项中包含哪个“可拖动”项目。您必须有一种方法来记住放入容器中的内容。 data() jquery 对象上的函数是一个很好的方法。
在放置函数中:
var itemId = $(ui.draggable).attr("id");
$(this).data('dropped', itemId);
在点击回调中使用:
if ($(item).data('dropped'))
{
alert($(item).data('dropped'));
}
注意:这只会记住最近删除的项目，并且一旦将其放入新容器中就不会将其删除 - 这应该很容易实现。
更新 2:以下内容应提供带有可拖动项目 ID 的警报。我将条件放在那里以确定它是否被移动到底部的容器中。
$('.ui-widget-content').click(function (event) {
var item = event.target;
if (item.offsetTop >= 140)
{
alert(item.id);
}
});
新 fiddle :http://jsfiddle.net/KLLCg/7/
更新:看起来您想要一些不同的东西。如果您只想要目标容器的 ID，您应该能够使用 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);
}
查看更新的 fiddle :http://jsfiddle.net/KLLCg/6/
原答案
首先 - 您应该将点击处理程序放在 document.ready 内。我认为您可能遇到问题，因为事件目标对象将是单击的任何内容，并且 <p>元素没有 id。如果我理解您的问题，以下代码可能会起作用。
$('.ui-widget-header').click(function (event) {
var item = event.target;
if (item.nodeName == 'P') {
item = item.parentNode;
}
alert(item.id);
});
jsfiddle 示例:http://jsfiddle.net/KLLCg/3/
关于javascript - jquery ui 当我单击可放置项目时如何获取可拖动项目的 id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23643112/