17

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

4

9 回答 9

28

尝试

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

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

  • ui.helper - 当前的帮助元素（通常是项目的克隆）
  • ui.position - 助手的当前位置
  • ui.offset - 助手的当前绝对位置
  • ui.item - 当前拖动的元素
  • ui.placeholder - 占位符（如果您定义了一个）
  • ui.sender - 项目来自的可排序对象（仅当您从一个连接列表移动到另一个列表时才存在）
于 2009-03-19T12:11:53.370 回答
8

似乎contextui.item 在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++);}
于 2010-08-18T15:49:16.320 回答
2

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

helper: function() {
    return '<div id="myHelper">This is my custom helper.</div>';
}
于 2009-04-01T15:18:45.163 回答
1

来自 jQuery UI 可拖动文档：

如果您不仅想拖动，还想拖放，请参阅 jQuery UI Droppable 插件，它为可拖动对象提供了放置目标。

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

于 2009-03-19T12:13:32.587 回答
1

我成功使用了可排序的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!');
  }
});
于 2012-05-19T05:19:49.887 回答
1

是的，当你混合 sortables draggables droppables 等时，这是一个问题。将可排序容器也设为 droppable：

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

那应该工作

于 2011-04-08T00:28:50.560 回答
0

Seems a bit hacky - but worked it out! I have to use $('.dragrow1 li:last')

于 2010-01-20T16:24:43.423 回答
0

您可以使用自定义数据属性来存储拖动项目的 id。该属性仍然存在于掉落的物品上。源代码如下：

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

在 sortable 中使用$('dropped item").data('id')来获取 id，如：

$("#sortable").sortable({
  ...,
  receive: function(e, ui) { 
      var id = ui.item.data('id');
  }
});
于 2012-09-13T08:35:52.193 回答
-2 
$( "#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();
于 2014-05-14T02:34:11.953 回答