jQuery UI可排序的div，如何确定在适当的顺序？

Question

好吧，我有三个街区，我想让用户能够按他喜欢的方式排序：

<div id="sortable" class="row ui-sortable">
    <div class="boxEncar">
        <div class="col-md-4 ui-sortable">
            <div id="8_5_middle1" class="block block-8">
                <div id="editor-container">
                    <h2 id="title8">Block 8</h2>
                    <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 ui-sortable">
            <div id="7_6_middle2" class="block block-7"> 
                <div id="editor-container">
                    <h2 id="title7">Block 7</h2>
                    <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
                </div>
            </div>
        </div>

        <div class="col-md-4 ui-sortable">
            <div id="9_7_middle3" class="block block-9">
                <div id="editor-container">
                    <h2 id="title9">Block 9</h2>
                    <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                </div>
            </div>
        </div>
    </div>
</div>

例如，id 8_5_middle1，显示存储在数据库上的weight _ block-id _ zone，如下所示：

ZONE    |   bid  | weight
---------------------------
middle1 |    8   |  5
---------------------------
middle2 |    7   |  6
---------------------------
middle3 |    9   |  7 

这里的问题是：

jQuery(document).ready(function() {
    jQuery('.col-md-4').sortable({
        connectWith: ".col-md-4",
        items: ".block",
        update: function (event, ui) {
            var myTable = jQuery(this).sortable('toArray').toString();
            alert(myTable);
        }
    });

});

当我将一个街区拖到另一个“假设我将block8从middle1拖到middle2”时，这里是我的警告：8_5_middle1,7_6_middle2，意思是它只是提醒旧位置！是否有一种方式提醒新的区域，该块是被定位的？

非常感谢

Answer 1

这是你想要的吗？

jQuery('.col-md-4').sortable({
    connectWith: ".col-md-4",
    items: ".block",
    update: function (event, ui) {
        var myTable = jQuery(this).sortable('toArray').toString();
        //alert(myTable);
        alert($(ui.item).index());
    }
});

$(ui.item).index()；将返回当前项索引，元素ids不会更改，那么如何获得更新的区域？

编辑:如果您想获得拖动的项id或其他属性，可以使用$(ui.item).attr('id')

琴杆

因为您要传递ui对象，所以有几种东西是可用的。理解console.log(ui)并检查对象内容将非常有帮助。