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＆＃34;在这里我的警报：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（）;将返回当前项索引，元素ID不会改变，那么如何获得更新的区域？

编辑：如果您想获取拖动的商品ID或其他属性，可以使用$(ui.item).attr('id')

fiddle link

由于您传递的是ui对象，因此您可以使用多种内容。了解console.log（ui）是否非常有用，并检查对象内容。

jQuery UI可排序div，如何确定订单到位？

1 个答案: