Question

当我删除拖动的元素时，我试图使用下面的代码来触发ajax请求，但它不起作用。我想这是因为我实际上并没有得到身份证，但我不确定。

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。 / p>

给出修改后的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，但是没有发布的数据 - 我认为已经从问题中删除了。如果您只是按下网址并传递了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;
        }
     });
});

在使用jquery UI时，如何获取可拖动和可放置元素的id？

2 个答案: