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')工作正常。

Answer 1

尝试

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

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

ui.helper - 当前的助手元素（通常是克隆的元素）项）
ui.position - 当前的位置辅助
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

来自jQuery UI draggable docs：

如果你不想只是拖动，但是拖放，请参阅jQuery UI Droppable插件，提供了一个放弃可拖动目标。

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

Answer 5

是的，当你混合sortables draggables droppables等时，这是一个问题。使可排序容器也可以放置：

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

我使用 beforeStop 事件成功进行了排序。

来自here

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

似乎有点hacky - 但是解决了！我必须使用$（'。dragrow1 li：last'）

Answer 8

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

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

如何访问被放入可排序的draggable元素的id

9 个答案: