javascript - jQuery Draggable - 获取可拖动的 id

Question

找到解决方案! 我发现了它，我忽略了我只能获取变量项的 id。所以我把var item_id = item.attr('id');这就是我的解决方案。比我想象的简单得多。感谢大家的帮助!

好吧，我在 jQuery 中有多个可拖动元素，它们都是图像，但每个元素都有自己的 ID。不管怎样，我已经设置了一个函数，一旦图像被拖放到可放置的物体上，就会执行该函数。我希望能够提取图像的 ID，以便我可以处理数据库中已删除的图像。

function foundationsInSpot(drag_item,spot)
{
var oldSpotItem = $(spot).find('img');
if(oldSpotItem.length>0) {
    oldSpotItem.appendTo('#foundationinv').draggable({ revert: 'invalid' });
}
var item = $('<img />');
var item_id = "";
var bid = "<?= $bid ?>";
item.attr('src',drag_item.attr('src')).attr('id',drag_item.attr('id')).attr('class',drag_item.attr('class')).appendTo(spot).draggable({ revert: 'invalid' });
drag_item.remove();
alert('BenID: ' + bid + ' Foundation: ' + item_id);
var dataString = 'item_id='+ item_id + '&bid=' + bid;  
    $.ajax({
        type: "POST",
        data: dataString,
        url: "http://motb.isgreat.org/objects/pfoundations.php",
    });
}

这就是我的代码。我需要找到item_id 。这是我的猜测var item_id = $('<img />').attr('id');但它返回空白信息。我也尝试过var item_id = ui.draggable.attr("id");这就停止了我剩下的功能。有任何想法吗？提前致谢。

顺便说一句，这是我的可拖动项目的样子。 <img src='http://motb.isgreat.org/objects/khhhqw4s.png' class='object foundation' id='khhhqw4s'/>

更新 我移动了var item_id = ui.draggable.attr("id");在 if 语句之上，现在我得到 undefined 。所以我不确定从这里去哪里，但我知道我的 AJAX 调用运行正常，因为它正在使用 undefined 更新我的数据库。 .

更新 - 再次

所以这就是我如何调用我的函数，如果这样更容易的话。

    $(".foundations").draggable({ revert: 'invalid'}).addTouch;
$('#foundationinv').droppable({accept: '.foundations'});
$("#foundations").droppable({ accept: '.foundations'})
$('#foundations,#foundationinv').bind('drop', function(ev,ui) { foundationsInSpot(ui.draggable,this); });

我以前从来没有做过这样的事情，所以这真的超出了我的能力范围。如果您想亲自查看该页面，请访问http://motb.isgreat.org/然后单击登录按钮，并使用 testbot 作为用户名和密码。要查看可拖动项的位置，左侧有一个大框，下面有 4 个较小的框，单击小框上方的“基础”一词。我试图将出现的那些对象拖到小框中。您可以看到一条警报，其中包含我试图传递的信息。请随意检查我的源代码是否有任何问题，这些项目是从我的数据库中调用的，因此您的源代码中可能缺少我的 PHP。

<小时/>

我找到了，我忽略了我只能获取变量项的 id。所以我把 var item_id = item.attr('id');这就是我的解决方案。比我想象的简单得多。感谢大家的帮助!

Answer 1

在droppable中，你有一个名为drop的属性

$("#destination").droppable({
   hoverClass: 'ui-state-hover',        
   helper: 'clone',        
   cursor: 'move',        
   drop: function(event, ui) {            
       $(this).addClass('ui-state-highlight');
       $(ui.draggable).addClass('ui-state-highlight');     
       $(ui.draggable).draggable('disable');

       console.log('Dragged: ' + $(ui.draggable).attr("id"));
   }    
});

使用该方法来调用调用 $(ui.draggable).attr("id") 删除的对象

如果您看到该对象，ui.draggable 只是 HTML，很快您用 $() 包装它，您将能够用它执行任何 jQuery 操作.

http://jsbin.com/iboli4/edit

在 Inspector 中打开控制台以查看 ID