关于拖动更新的jquery，更改db

Question

I have a set of Data (posted below) that gets sorted by 'section'. When it is loaded on the page each item gets sorted into a UL according to its section.

What I am trying to accomplish is when the user drags an item to another section and drops it, the section in the DB will automatically update (ie. drag item2 to section 2, section will update from 0 to 2).

I dont care about keeping the items in a specific order, the only thing that needs to update is the section #

Functionality Demonstrated with this FIDDLE

Database

id   name    section
 1   item1      0
 2   item2      0
 3   item3      0
 4   item4      0

HTML

 <!-- Items are dynamically inserted into ULs based on section #, unique ids become li id -->
    <!-- DATA = 0 -->
    <ul id="main" class="sortable" data="0">
        <li id="1">Item 1</li>
        <li id="2">Item 2</li>
        <li id="3">Item 3</li>
        <li id="4">Item 4</li>
    </ul>
    <!-- DATA = 1 -->
    <ul id="box1" class="sortable" style="background-color: blue" data="1">

    </ul>
    <!-- DATA = 2 -->
    <ul id="box2" class="sortable" style="background-color: green" data="2">

    </ul>

jQuery

after a drag event has completed im trying to call a function that runs a php script to update the DB but im having an issue with passing the ID variable through

$('.sortable').sortable({
    connectWith: '.sortable',
    update: function(event, ui) {
        //Get id of element moved and the id of ul it was dropped in 
        updateDB(updateid, sectionid);
    }
});

function updateDB(updateid, sectionid) {
    $.ajax({
       //grab script, pass id and update database 
    });
}

Can someone point me in the right direction on how to grab the data so I can update the db properly

Answer 1

I hope I understand what you asked, you want to get the element id which was dragged to some place? If so, here is the code:

$('.sortable').sortable({
    connectWith: '.sortable',
    update: function(event, ui) 
    {
        alert(ui.item.attr('id'));
        var id = ui.item.attr('id');
        updateDB(id);
    }
});

function updateDB(id) {
    $.ajax({
       //grab script, pass id and update database 
    });
}

for finding the box in which the element was dragged to, you can use: alert(ui.item.parent().attr('id'));

Note: the ui object has in it an attribute called item which holds the jquery element which was dragged. here is the link to the API. By having this object you can access all it attributes with the .attr('attribute') function.