javascript jQuery draggables - 获取可拖动的 id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6163510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery draggables - get id of dragable
提问by lukecreative
Solution Found!I found it, I was overlooking that I could just get the id of the variable item. So I put var item_id = item.attr('id');and that was my solution. So much simpler than I thought. Thanks for your help everyone!
找到解决方案！我找到了，我忽略了我只能获取变量项的 id。所以我放了var item_id = item.attr('id');，这就是我的解决方案。比我想象的要简单得多。谢谢大家的帮助！
Okay, so I have multiple draggable elements in jQuery, they are all images, but each one has their own ID. Anyway, I have set up a function that is preformed once the image is dropped onto the droppable. I want to be able to pull the id of the image so I may process what image has been dropped in my database.
好的，所以我在 jQuery 中有多个可拖动元素，它们都是图像，但每个元素都有自己的 ID。无论如何，我已经设置了一个函数，一旦将图像放到 droppable 上就会执行该函数。我希望能够提取图像的 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",
});
}
So that's my code. I need to find item_id. Here was my guess var item_id = $('<img />').attr('id');but it returned blank information. I also tried var item_id = ui.draggable.attr("id");and that just stopped the rest of my function. Any ideas? Thanks in advance.
这就是我的代码。我需要找到item_id. 这是我的猜测，var item_id = $('<img />').attr('id');但它返回了空白信息。我也尝试过var item_id = ui.draggable.attr("id");，这只是停止了我的其余功能。有任何想法吗？提前致谢。
By the way here is how my draggable items look like.
<img src='http://motb.isgreat.org/objects/khhhqw4s.png' class='object foundation' id='khhhqw4s'/>
顺便说一下，这里是我的可拖动项目的样子。
<img src='http://motb.isgreat.org/objects/khhhqw4s.png' class='object foundation' id='khhhqw4s'/>
UPDATEI moved the var item_id = ui.draggable.attr("id");above the if statement, and now I get undefined. So I am unsure where to go from here, but I am aware my AJAX call is operating correctly as it is updating my database with undefined.
更新我移动了var item_id = ui.draggable.attr("id");上面的 if 语句，现在我得到了undefined. 所以我不确定从哪里开始，但我知道我的 AJAX 调用运行正常，因为它正在使用undefined.
UPDATE - Again
更新 - 再次
So here is how I am calling my function if this makes it easier.
所以这就是我如何调用我的函数，如果这更容易的话。
$(".foundations").draggable({ revert: 'invalid'}).addTouch;
$('#foundationinv').droppable({accept: '.foundations'});
$("#foundations").droppable({ accept: '.foundations'})
$('#foundations,#foundationinv').bind('drop', function(ev,ui) { foundationsInSpot(ui.draggable,this); });
I have never done anything like this before, so It's really beyond me. If you would like to see the page in person, go to http://motb.isgreat.org/and click the login button, and use testbotfor both the username and the password. To see where the draggables are, on the left side there is this big box with 4 smaller ones below it, click above the small box where the word is foundations. I am trying to drag those objects that appear into the small box. You can see an alert with the information I am trying to pass. Feel free to check my source for any issues, the items are called up from my database, so my PHP is probably missing from your source.
我以前从未做过这样的事情，所以这真的超出了我的能力。如果您想亲自查看该页面，请访问http://motb.isgreat.org/并单击登录按钮，并使用testbot作为用户名和密码。要查看可拖动对象的位置，在左侧有一个大框，下面有 4 个小框，单击“基础”一词的小框上方。我正在尝试将那些出现在小框中的对象拖动。您可以看到包含我试图传递的信息的警报。请随时检查我的源代码是否有任何问题，这些项目是从我的数据库中调用的，因此您的源代码中可能缺少我的 PHP。
I found it, I was overlooking that I could just get the id of the variable item. So I put var item_id = item.attr('id');and that was my solution. So much simpler than I thought. Thanks for your help everyone!
我找到了，我忽略了我只能获取变量项的 id。所以我放了 varitem_id = item.attr('id');这就是我的解决方案。比我想象的要简单得多。谢谢大家的帮助！
回答by balexandre
inside the droppableyou have a property called drop
在里面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"));
}
});
use that method to call what object was dropped calling $(ui.draggable).attr("id")
使用该方法调用被删除的对象调用 $(ui.draggable).attr("id")
if you see the object, ui.draggableis only the HTML, soon you wrapp it with $()you will be able to do any jQuery operation with it.
如果你看到的对象ui.draggable只是 HTML，很快你用它包装它$()你就可以用它做任何 jQuery 操作。
open the Console in Inspector to see the id's
在 Inspector 中打开控制台以查看 ID
