jQuery的就拖更新，变更分贝 [英] jquery on drag update, change db

问题描述

我有一组数据（下贴），其被依部分的。当页面上装载的每个项目被根据其部分整理成一个UL认证。

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.

我试图做到的是，当用户拖动某项到另一部分，并删除它，在DB的部分将自动更新（即拖动项目2第2部分将更新为0〜2）。

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 #

功能展示与此 FIDDLE

Functionality Demonstrated with this 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脚本来更新数据库，但功能有一个问题，通过

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 
    });
}

有人点我在正确的方向上如何获取数据，所以我可以更新数据库正常

推荐答案

我希望我理解你问什么，你想要得到的元素的id这是拖到某个地方？ 如果是这样，这里是code：

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 
    });
}

寻找其中的元素被拖到框，你可以使用：警报（ui.item.parent（）ATTR（'身份证'））;

注意：的UI对象中有所谓的项目属性，它持有其被拖了jQuery元素。这里是链接到API 。有了这个对象，你可以访问所有它与 .attr（'属性'）函数属性。

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.

这篇关于jQuery的就拖更新，变更分贝的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！