使用 jquery UI 时如何获取可拖放元素的 id？

Posted 2023-05-08

【中文标题】使用 jquery UI 时如何获取可拖放元素的 id？

【英文标题】：How can I get the id's of a draggable and droppable element when using jquery UI?

【发布时间】：2012-11-06 09:29:49

【问题描述】：

我正在尝试使用下面的代码在我拖放拖动的元素时触发 ajax 请求，但它不起作用。我认为这是因为我实际上并没有得到 id，但我不确定。

html：

<div class="draggable">item 1</div>
<div class="draggable">item 2</div>
...

<div class="droppable">drop location 1</div>
<div class="droppable">drop location 2</div>
...

jQuery:

$(document).ready(function() 
  $(".draggable").draggable(cursor: 'move', helper: 'clone');

  var ID1 = $(".draggable").attr(id);
  var ID2 = $(".droppable").attr(id);

  $(".droppable").droppable(
    drop: function()  
        $.ajax(
            type: "POST",
            url: 'www.mydomain.com/'+ID1+'/'+ID2,
            dataType: 'html',
            success: function()
        );
        return false;
     
  );
);

【问题讨论】：

jquery ui get id of droppable element, when dropped an item的可能重复

【参考方案1】：

ajon 的回答不太正确 - ID1 和 ID2 都与目标（拖放元素的位置）相关，而问题要求提供已拖放元素的 id。

给定修改后的 html（根据问题，但为所有元素添加了 id）

<div class="draggable" id="item1">item 1</div>
<div class="draggable" id="item2">item 2</div>
...

<div class="droppable" id="drop1">drop location 1</div>
<div class="droppable" id="drop2">drop location 2</div>
...

这个 javascript 应该可以工作：

$(document).ready(function() 
  $(".draggable").draggable(cursor: 'move', helper: 'clone');

  $(".droppable").droppable(
    drop: function(event, ui) 
      var dragID = ui.draggable.attr('id');
      var dropID = event.target.id;  // or $(this).attr("id"), or this.id
      $.ajax(
        type: "POST",
        url: 'www.mydomain.com/'+dragID+'/'+dropID,
        dataType: 'html',
        success: function()
      );
      return false;
    
  );
);

ps - 你也在做一个 ajax POST 但没有发布数据 - 我认为这已从问题中删除。如果您只是点击 url 并传递如图所示的 2 个 id，那么直接 GET 就足够了。

$.get('www.mydomain.com/'+dragID+'/'+dropID, function(data) 
  ..
);

【参考方案2】：

您尝试获取 id 的方式无效。您正在使用类选择器.，它将返回给定类的所有对象。在您的示例中，每个类都有 2 个以上（可拖动和可放置）。

其次，这些元素没有 ID，因此 .attr(id) 会返回 null（我认为）。

第三，id 周围没有引号，这意味着它将被解释为尚未设置的变量。

最后，要获取id，可以在drop函数中使用event.target.id获取。

尝试以下方法：

<div class="draggable" id="item1">item 1</div>
<div class="draggable" id="item2">item 2</div>
...

<div class="droppable" id="drop1">drop location 1</div>
<div class="droppable" id="drop2">drop location 2</div>
...

然后：

$(document).ready(function() 
    $(".draggable").draggable(cursor: 'move', helper: 'clone');

    $(".droppable").droppable(
        drop: function(event, ui) 
            var ID1 = event.target.id;
            var ID2 = $(this).attr("id");
            $.ajax(
                type: "POST",
                url: 'www.mydomain.com/'+ID1+'/'+ID2,
                dataType: 'html',
                success: function()
            );
            return false;
        
     );
);