CODEWITHSUNDEEP
javascriptjqueryjquery-ui
SpencerX
SpencerX

Reputation: 5723

jQuery UI sortable div's, how to determine the order in place?

Well I have three blocks that I want for the user to be able to sort as he pleased :

<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>

The id 8_5_middle1 for example, show's weight _ block-id _ zone that are stocked on the database like this :

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

So the issue here is this:

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

});

When I drag a block to another "let's say that I drag the block8 from middle1 to middle2 " here's my alert : 8_5_middle1,7_6_middle2 meaning that it just alert the old position! Is there a way to alert the new zone which the block is positionned ?
Much appreciated

Upvotes: 2

Views: 857

Answers (1)

alou
alou

Reputation: 1502

Is this what you want?

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(); will return the current item index, the element ids are not changing so how would you get an updated zone?

Edit: If you want to get the dragged item id or other attributes, you may use $(ui.item).attr('id')

fiddle link

Since you are passing the ui object, there are several things you have available there. It will be very helpful to understand if you console.log(ui) and examine the object contents.

Upvotes: 1

Related Questions