CODEWITHSUNDEEP
javascriptjqueryjquery-uivariablesjquery-ui-draggable
lukecreative
lukecreative

Reputation: 15

jQuery draggables - get id of dragable

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

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

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

Upvotes: 0

Views: 16541

Answers (1)

balexandre
balexandre

Reputation: 75073

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.com/iboli4/edit

open the Console in Inspector to see the id's

Upvotes: 6

Related Questions