jquery - 如何访问放入可排序的可拖动元素的ID

标签 jquery jquery-ui jquery-ui-draggable jquery-ui-sortable

我正在使用 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') 工作正常。

最佳答案

尝试

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

根据文档,接收(实际上是可排序的所有回调)获得两个参数。第二个参数应包含:

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

关于jquery - 如何访问放入可排序的可拖动元素的ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/661927/

相关文章:

javascript - Angular 2 如何与 jquery 一起使用?

jquery-ui - 使用 bootstrap.css 选择更小更好的选择

javascript - 如何让人们将 LI 拖放到列表中的特定位置? (控制台日志问题)

javascript - Materialise CSS 和 Ruby on Rails 中的选项卡

javascript - 选中复选框后获取坐标

javascript - Firefox 的 iframe 内未触发关键事件

javascript - ReactJS 在多个列表之间拖放

php - 仅显示每个月的第一个星期五可供选择 - jQuery UI Datepicker

javascript - jQuery ui 可排序 : How to disallow the nesting of groups while allowing all the items to be inter-sortable

html - 是否可以使用 : CSS overflow: scroll on a div together with jQuery draggable?