javascript - jQuery draggables - get id of dragable - Stack Overflow

admin管理员组

文章数量:1296456

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!

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.

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: ".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.

By the way here is how my draggable items look like. <img src='.png' class='object foundation' id='khhhqw4s'/>

UPDATE I 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.

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 / and click the login button, and use testbot for 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.

---

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!

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!

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.

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/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.

By the way here is how my draggable items look like. <img src='http://motb.isgreat/objects/khhhqw4s.png' class='object foundation' id='khhhqw4s'/>

UPDATE I 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.

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/ and click the login button, and use testbot for 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.

---

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!

• javascript
• jquery
• jquery-ui
• variables
• jquery-ui-draggable

Share Improve this question Follow edited Mar 19, 2013 at 14:33 Mathew Thompson 56.5k1515 gold badges129129 silver badges150150 bronze badges asked May 28, 2011 at 18:12 lukecreativelukecreative 1511 gold badge22 silver badges66 bronze badges 5

• What do you want to get the id of? I'm quite confused about what you're trying to do. id attributes must be unique on the page. – lonesomeday Commented May 28, 2011 at 18:28
• I want to get the id of the image - which is also the draggable. Here is the code. <img src='http://motb.isgreat/objects/khhhqw4s.png' class='object foundation' id='khhhqw4s'/> – lukecreative Commented May 28, 2011 at 19:01
• I cant understand your site: balexandre./temp/2011-05-28_2306.png – balexandre Commented May 28, 2011 at 21:07
• looking at it in Chrome, you have javascript errors: balexandre./temp/2011-05-28_2313.png - You have so bad javascript that I would suggest that you start again, delete all your javascript, append the script file at the bottom of your code and do all in that external file, do not put any javascript code in your main page. Use the Inspector to perform what you want and do testing – balexandre Commented May 28, 2011 at 21:15
• Sorry forgot to mention it was Webkit based, whoops! Yeah I am aware of the JavaScript errors, I am constantly working on it, what's on the web is different than on my Mac, I just have the JS on one page for my convenience of editing, then I am going to rework it externally. Hopefully it still is good considering I am 15! Thanks for your help! – lukecreative Commented May 29, 2011 at 18:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

inside the droppable you have a property called 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")

if you see the object, ui.draggable is only the HTML, soon you wrapp it with $() you will be able to do any jQuery operation with it.

http://jsbin./iboli4/edit

open the Console in Inspector to see the id's

本文标签： javascriptjQuery draggablesget id of dragableStack Overflow