javascript - jquery 拖动更新，更改数据库

Question

我有一组数据(发布在下面)，按“部分”排序。当它加载到页面上时，每个项目都会根据其部分分类到 UL 中。

我想要完成的是，当用户将一个项目拖到另一个部分并将其放下时，数据库中的该部分将自动更新(即，将 item2 拖到第 2 部分，部分将从 0 更新到 2)。

我不关心将项目保持在特定的顺序，唯一需要更新的是#部分

由此展示的功能 FIDDLE

数据库

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

拖动事件完成后，我尝试调用一个运行 php 脚本的函数来更新数据库，但在传递 ID 变量时遇到问题

$('.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 
    });
}

有人可以指出我如何获取数据的正确方向，以便我可以正确更新数据库

Answer 1

我希望我明白你的问题，你想获取被拖到某个地方的元素id吗？ 如果是这样，代码如下:

$('.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 
    });
}

要查找元素被拖动到的框，可以使用:alert(ui.item.parent().attr('id'));

注意: ui 对象中有一个名为 item 的属性，该属性保存被拖动的 jquery 元素。这是link to the API 。通过拥有此对象，您可以使用 .attr('attribute') 函数访问它的所有属性。