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

Question

我正在尝试使用下面的代码在我拖放拖动的元素时触发 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;
     }
  });
});

Answer 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) {
  ..
});

Answer 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;
        }
     });
});