jQuery 如何访问放入可排序的可拖动元素的 id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/661927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to access the id of draggable element which is dropped into sortable
提问by Steerpike
I am using the JQuery libs to implement drag and drop.
我正在使用 JQuery 库来实现拖放。
How do I get at the element that is being dragged when it is dropped into sortable list?
将元素放入可排序列表时，如何获取被拖动的元素？
I want to get the id of the div being dragged. The following element is dragged:
我想获取被拖动的 div 的 id。拖动以下元素：
<div class="control" id="control[1]" >
<img src="img/controls/textfield.png" />
</div>
I have the standard dragging function from their example
我从他们的例子中得到了标准的拖动功能
$(".control").draggable({
connectToSortable: '#sortable',
helper: 'clone'
});
function stop in dragging section with next code return proper value
功能在拖动部分停止，下一个代码返回正确的值
stop: function(event, ui) {
alert(ui.helper.attr('id'));
}
And this is sortable element:
这是可排序的元素：
<ul id="sortable"><li>test</li></ul>
and his function:
和他的功能：
$("#sortable").sortable({
revert: true,
accept: '.control',
receive: function(event, ui) {
// here i need to get draggable element id
}
});
I have tried various ui.id etc which doesn't seem to work.
我尝试了各种 ui.id 等，但似乎不起作用。
receive: function(event, ui) {
$(ui.draggable).attr("id")
}
throws undefined.
抛出undefined。
Update:
更新：
Sorry, my fault :) As my mother used to tell - "Read API before coding". ui.item.attr('id')works fine.
对不起，我的错:) 正如我妈妈常说的 - “在编码之前阅读 API”。ui.item.attr('id')工作正常。
回答by Steerpike
Try
尝试
receive: function(event, ui) {
$(ui.item).attr("id")
}
According to the documentation the receive (indeed allcallbacks for sortable) get two arguments. The second argument should contain:
根据文档，接收（实际上是可排序的所有回调）获得两个参数。第二个参数应包含：
- ui.helper - the current helper element (most often a clone of the item)
- ui.position - current position of the helper
- ui.offset - current absolute position of the helper
- ui.item - the current dragged element
- ui.placeholder - the placeholder (if you defined one)
- ui.sender - the sortable where the item comes from (only exists if you move from one connected list to another)
- ui.helper - 当前的辅助元素（通常是项目的克隆）
- ui.position - 助手的当前位置
- ui.offset - 助手的当前绝对位置
- ui.item - 当前拖动的元素
- ui.placeholder - 占位符（如果你定义了一个）
- ui.sender - 项目来自的可排序对象（仅当您从一个连接列表移动到另一个时才存在）
回答by Catalin DICU
It seems like the contextof ui.item changes between the beforeStopevent and receiveevent.
事件和事件context之间的 ui.item似乎发生了变化。beforeStopreceive
In my case I'm trying to set the id of the item to a generated value and
在我的情况下，我试图将项目的 id 设置为生成的值和
receive: function (event, ui) { ui.item.attr("id", "control" + currentControlId++);}
doesn't work for me
对我不起作用
So you can work around this :
所以你可以解决这个问题：
beforeStop: function (event, ui) { itemContext = ui.item.context;},
receive: function (event, ui) { $(itemContext).attr("id", "control" + currentControlId++);}
回答by ironkeith
I had a similar problem, and had troubles accessing the helper element in the start event. What I ended up doing was setting the helper attribute to a function which returned some custom HTML. I was able to access that HTML in the start event without any problems.
我遇到了类似的问题，并且在访问 start 事件中的 helper 元素时遇到了麻烦。我最终做的是将 helper 属性设置为返回一些自定义 HTML 的函数。我能够在开始事件中访问该 HTML，没有任何问题。
helper: function() {
return '<div id="myHelper">This is my custom helper.</div>';
}
回答by karim79
From the jQuery UI draggable docs:
来自 jQuery UI 可拖动文档：
If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.
如果您不仅想要拖动，还想要拖放，请参阅 jQuery UI Droppable 插件，该插件为可拖动对象提供了放置目标。
回答by kami
Yes, that's a problem when you mixing sortables draggables droppables etc. Make sortable container as droppable as well:
是的，当你混合 sortables draggables droppables 等时，这是一个问题。使 sortable 容器也可放置：
$("#sortable").sortable({
revert: true,
accept: '.control',
receive: function(event, ui) {
// here i need to get draggable element id
}
});
$('#sortable').droppable({
accept: '.control',
drop: function(e, ui){
var your_draggable_element = $(ui.draggable);
var your_helper = $(ui.helper);
}
});
that should work
那应该工作
回答by Khawar
I had success using the beforeStopevent for the sortable.
我成功地使用beforeStop事件进行排序。
From here
从这里
beforeStop: This event is triggered when sorting stops, but when the placeholder/helper is still available.
beforeStop：排序停止时触发此事件，但当占位符/助手仍然可用时。
$( "#something" ).sortable({
beforeStop: function(event, ui) {
//you should check if ui.item is indeed the one you want!
item_id = $(ui.item).attr('id');
$(ui.item).html('I'm changing the dropped element in the sortable!');
}
});
回答by Mr2P
You can use a custom data attribute to store the id of the dragged items. This attribute is still there on the dropped items. The source code as following:
您可以使用自定义数据属性来存储拖动项目的 id。这个属性仍然存在于掉落的物品上。源代码如下：
<div class="..." data-id="item_id">
...
</div>
Using $('dropped item").data('id')in the sortable to get the id like:
$('dropped item").data('id')在 sortable 中使用以获取 id，如：
$("#sortable").sortable({
...,
receive: function(e, ui) {
var id = ui.item.data('id');
}
});
回答by WastedSpace
Seems a bit hacky - but worked it out! I have to use $('.dragrow1 li:last')
似乎有点hacky - 但解决了！我必须使用 $('.dragrow1 li:last')
回答by nomasgabo
$( "#sortable1" ).sortable({
connectWith: ".connectedSortable",
cancel: ".disabledItem",
items: "li:not(.disabledItem)",
receive: function(event,ui){
**var page = ui.item.attr('value');**
var user = $("#select_users").val();
