如何访问放入可排序的可拖动元素的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")
}

抛出未定义。

---

更新：

抱歉，是我的错:) 正如我母亲常说的那样 - “在编码之前阅读 API”。 ui.item.attr('id') 工作正常。

Answer 1

尝试

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

根据文档，接收（实际上是可排序的所有回调）获取两个参数。 第二个参数应包含：

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

Answer 2

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

就我而言，我尝试将项目的 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++);}

Answer 3

我遇到了类似的问题，并且在访问开始事件中的帮助器元素时遇到了问题。 我最终所做的是将 helper 属性设置为返回一些自定义 HTML 的函数。 我能够在开始事件中访问该 HTML，没有任何问题。

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

Answer 4

是的，当您混合可排序、可拖动、可放置等时，这是一个问题。
使可排序容器也可放置：

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

这应该可行

Answer 5

来自 jQuery UI 可拖动文档：

如果您不仅想要拖动，而且还想要
拖放，查看 jQuery UI
Droppable 插件，它提供了
可拖动对象的放置目标。

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

Answer 6

我成功地使用了 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!');
  }
});

Answer 7

看起来有点老套 - 但成功了！ 我必须使用 $('.dragrow1 li:last')

Answer 8

您可以使用自定义数据属性来存储拖动项目的 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');
  }
});

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