jquery ui当我点击droppable项目时如何获取可拖动项目的id

我已经试了好几天了，我无法让它发挥作用。 我想得到div（ ui-widget-content ）的id是可拖动的项目，当我删除并单击div（ ui-widget-header ）时，这是被删除的项目，但我无法使其工作。

   $(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); //});    
Jogador 1
 
Jogador 2
 
Jogador 3
 
Jogador 4
 
Jogador 5
 
Jogador 6
 
Posicao 1
 
Posicao 2
 
Posicao 3
 
Posicao 4
 
Posicao 5
 
Posicao 6
   

Answer 1

更新3 ：看起来没有一种方法可以确定droppable中包含哪个“可拖动”项。 您必须有一个方法来记住放入容器的内容。 jquery对象上的data()函数是一个很好的方法。

在drop函数中：

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

新小提琴： 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); } 

看到更新的小提琴： http ： //jsfiddle.net/KLLCg/6/

原始答案

首先 – 你应该将你的点击处理程序放在document.ready 。 我认为你可能遇到了问题，因为事件目标对象将是被点击的内容，而

元素没有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/

Answer 2

试试这个你只需将拖动对象id存储到“dragId”中。