jquery ui当我点击可放置项目时，如何获取可拖动项目的ID [英] jquery ui How to get a id of a draggable item when i click on the droppable item
问题描述
我已经尝试了好几天，我无法得到它的工作。
我想要获取的div（ ui-widget-content ）的id，当我删除并点击div（ ui-widget-header ）这是丢弃的项目，但我无法使其工作。
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>
推荐答案
更新3 看起来不像有一种方法来确定可拖放内容包含哪个draggable项。您将必须有一种方法来记住放入容器的内容。一个jquery对象的 data（）函数是一个很好的方法。
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.
在drop函数中： / p>
In the drop function:
var itemId = $(ui.draggable).attr("id");
$(this).data('dropped', itemId);
在点击回调中使用：
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.
更新2 ：以下内容应该提供一个警报与id的可拖动项目。我把条件放在那里，以确定它是否被移入底部的容器。
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);
}
});
新小提琴： http://jsfiddle.net/KLLCg/7/
更新：看起来像你想要不同的东西如果您只想要目标容器的ID，您应该可以使用 event.target.id
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);
}
查看更新小提琴： http://jsfiddle.net/KLLCg/6/
ORIGINAL ANSWER
ORIGINAL ANSWER
首先 - 你应该把你的点击处理程序放在 document.ready 中。我认为你可能会遇到一个问题，因为事件目标对象将被点击，而且$ < p> 元素没有id。如果我明白你的问题，以下代码可能会起作用。
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示例： http://jsfiddle.net/KLLCg/3/
jsfiddle example: http://jsfiddle.net/KLLCg/3/
这篇关于jquery ui当我点击可放置项目时，如何获取可拖动项目的ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
