如何访问被拖放到可排序元素中的可拖动元素的ID

Question

我正在使用JQuery库来实现拖放。

当被拖放到可排序列表中时，如何获取被拖动的元素？

我想要获取被拖动的div的id。以下是被拖动的元素:

<div class="control" id="control[1]" >
  <img src="img/controls/textfield.png" />
</div>

我有他们示例中的标准拖动功能。

$(".control").draggable({
  connectToSortable: '#sortable',
  helper: 'clone'
});

使用下面的代码可以在拖动区域停止函数并返回正确的值:

stop: function(event, ui) {
  alert(ui.helper.attr('id'));
}

这是一个可排序的元素：

<ul id="sortable"><li>test</li></ul>

和他的函数：

$("#sortable").sortable({
  revert: true,
  accept: '.control',
  receive: function(event, ui) { 
    // here i need to get draggable element id
  }
});

我尝试了各种 ui.id 等，但似乎都不起作用。

receive: function(event, ui) { 
  $(ui.draggable).attr("id")
}

抛出undefined异常。

---

更新:

对不起，是我的错 :) 正如我母亲曾经说过的——“在编写代码之前先阅读API”。ui.item.attr('id')运行良好。

- Nikolai

Answer 1

试一试

receive: function(event, ui) { 
  $(ui.item).attr("id")
}

根据文档，`receive`（实际上是`sortable`的所有回调函数）应该包含两个参数。第二个参数应包含：

• `ui.helper` - 当前助手元素（通常是项目的克隆）
• `ui.position` - 助手的当前位置
• `ui.offset` - 助手的当前绝对位置
• `ui.item` - 当前拖动的元素
• `ui.placeholder` - 占位符（如果已定义）
• `ui.sender` - 项目来自的可排序列表（仅在从一个连接的列表移动到另一个连接列表时存在）

- Steerpike

---

为了更简洁的写法，您可以使用 ui.item.attr("id") 代替 $(ui.item).attr("id")。 - MrBoJangles

顺便说一句，谢谢你的回答。我找不到任何有关项目属性或如何访问它们的文档。 - MrBoJangles

@MrBoJangles，由于某种原因，它没有出现在jqueryui.com上，这是它应该出现的地方...似乎在这里：http://docs.jquery.com/UI/Sortable。 - Stephen Fuhry

Answer 2

看起来在 beforeStop 事件和 receive 事件之间，ui.item 的上下文发生了变化。

在我的情况下，我试图将该项的 id 设置为生成的值。

receive: function (event, ui) { ui.item.attr("id", "control" + currentControlId++);}

对我来说不起作用。

因此，您可以通过以下方式解决：

beforeStop: function (event, ui) { itemContext = ui.item.context;},
receive: function (event, ui) { $(itemContext).attr("id", "control" + currentControlId++);}

- Catalin DICU

---

非常感谢。我已经整天在寻找这个解决方案！ - rebellion

这似乎是一种巧妙的方法，但确实有效。这是否真的是处理在将生成的ID添加到可排序UL中的LI元素时的最佳方式？ - Ryan

Answer 3

是的，当您混合使用可排序、可拖动和可放置等功能时会出现问题。 将可排序容器也设为可放置：

$("#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);
    }
});

那应该可以工作。

- kami

Answer 4

我遇到了类似的问题，并且在开始事件中访问辅助元素时遇到了麻烦。最终我做的是将helper属性设置为一个返回自定义HTML的函数。我能够在开始事件中轻松访问那个HTML。

helper: function() {
    return '<div id="myHelper">This is my custom helper.</div>';
}

- ironkeith

Answer 5

我在可排序组件中使用beforeStop事件取得了成功。

请参考这里

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

- Khawar

Answer 6

从jQuery UI draggable文档中：

如果你不仅想拖拽，还想实现拖放，请参考提供可拖动目标的jQuery UI Droppable插件。

请参阅http://docs.jquery.com/UI/API/1.7/Droppable。

- karim79

Answer 7

您可以使用自定义数据属性来存储拖动项的ID。这个属性仍然存在于放置的项上。源代码如下：

<div class="..." data-id="item_id">
    ...
</div>

在可排序的项目中使用$('dropped item").data('id')来获取id，如下：

$("#sortable").sortable({
  ...,
  receive: function(e, ui) { 
      var id = ui.item.data('id');
  }
});

- Mr2P

Answer 8

看起来有点糊弄，但解决了！我得使用 $（'.dragrow1 li:last'）

- WastedSpace

Answer 9

$( "#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();

- nomasgabo

---

请提供您的解决方案的一些解释。 - Mike Stockdale

@Brian Tompsett 你好，我是标记此贴为低质量的人。这是一个两年前被OP放弃的不完整帖子。你的编辑使得帖子成为了一个包含Markdown语法错误的无效代码块。请不要编辑除非它可以改善质量而不会让事情变得更糟。 - T J