I have following markup and javascript to sort some items. Items can be sorted within a block or across other blocks. It works but I have a problem in retrieving correct block ID after an item is moved from one block to another.

For example, if I move item 1 within "Block 1", I get "I am in Block= block_1" but if I move Item 1 to Block 2 I still get I am in Block 1.

But I want to make the block 2 as its parent container. I need to retrieve this id so that I can do some ajax and update the db accordingly.

Can you please help me correct this??

<div id="blocks_sortable">
    <div id="block_1">
        <h2>Block 1</h2>

        <div class="items_sortable connectedSortable">
            <div id="item_1"> 
                <span>Item 1</span></div>   
            <div id="item_2"> 
                <span>Item 2</span></div>
            <div id="item_3"> 
                <span>Item 3</span></div>
        </div>
    </div>  
    <div id="block_2">
        <h2>Block 2</h2>

        <div class="items_sortable connectedSortable">
            <div id="item_4"> 
                <span>Item 4</span></div>   
            <div id="item_5"> 
                <span>Item 5</span></div>
            <div id="item_6"> 
                <span>Item 6</span></div>
        </div>
    </div>
</div>

<script>
$("#blocks_sortable").sortable({ });
$(".items_sortable").sortable({
     connectWith: '.connectedSortable'
    , forcePlaceholderSize: true
    ,         stop : function(event, ui){
                    alert("I am in block = "+$(this).parent().attr("id"));
                }
}).disableSelection();      
</script>

Thank you.

I have following markup and javascript to sort some items. Items can be sorted within a block or across other blocks. It works but I have a problem in retrieving correct block ID after an item is moved from one block to another.

For example, if I move item 1 within "Block 1", I get "I am in Block= block_1" but if I move Item 1 to Block 2 I still get I am in Block 1.

But I want to make the block 2 as its parent container. I need to retrieve this id so that I can do some ajax and update the db accordingly.

Can you please help me correct this??

<div id="blocks_sortable">
    <div id="block_1">
        <h2>Block 1</h2>

        <div class="items_sortable connectedSortable">
            <div id="item_1"> 
                <span>Item 1</span></div>   
            <div id="item_2"> 
                <span>Item 2</span></div>
            <div id="item_3"> 
                <span>Item 3</span></div>
        </div>
    </div>  
    <div id="block_2">
        <h2>Block 2</h2>

        <div class="items_sortable connectedSortable">
            <div id="item_4"> 
                <span>Item 4</span></div>   
            <div id="item_5"> 
                <span>Item 5</span></div>
            <div id="item_6"> 
                <span>Item 6</span></div>
        </div>
    </div>
</div>

<script>
$("#blocks_sortable").sortable({ });
$(".items_sortable").sortable({
     connectWith: '.connectedSortable'
    , forcePlaceholderSize: true
    ,         stop : function(event, ui){
                    alert("I am in block = "+$(this).parent().attr("id"));
                }
}).disableSelection();      
</script>

Thank you.

• php
• javascript
• jquery
• jquery-ui-sortable

• Another thing you should be aware of is that generally in a function fired from an event, the event is what is referenced by "this"....so what you're asking for is the parent of the event object not the element that is moved. At least, that's how I believe it works...that's how it works in vanilla JS (again I don't really have experience with jQuery so I don't know if $(this) is different etc.) – MisterMister Commented Apr 8, 2010 at 20:22

3 Answers 3

I suspect the problem is you are using the wrong event. Basically what I think is happening is that the stop event is firing too soon or for the wrong object.

I would read over the docs Here and see if there is a more appropriate event for what you are trying to do.

I think what you want is something like the "update" or "deactivate" events.

Both of these events will fire once for each "block" if you move an item from one "block" to the other.

Update will only fire once if moved within a block

Deactivate will always fire for all the blocks.

With update you can check if the event is firing in the "non-original" block by checking for ui.sender:

        $(".items_sortable").sortable({
            connectWith: '.connectedSortable',
            forcePlaceholderSize: true,
            update: function(event, ui){
                if(ui.sender){
                    alert(ui.item.attr("nodeName") + "  in block = " + 
                    $(this).parent().attr("id"));
                }
            }
        }).disableSelection(); 

Will alert the parent id ONLY when an item is moved to another block. The event will fire for both blocks, but the alert will only show for the "non-original" one.

If you're using AJAX to update info in a DB I suspect what you want is the event to fire for both blocks:

Once for the "original" which is now missing an element, and one for the "new" which has now gained an element.

I'm not too familiar with exactly what you are doing or jQuery UI, so I can't be more specific. Remember, the docs are your friend.

Hope this helps.

maybe its better instead of using the id attribute you identify the elements using their index.

so more like

alert('I am in block' + $(this).parent().index());

You can play safe and add a REL attribute which will hold the value of the appropriate parent id. You will need to add some code to maintain that REL attribute when you move elements around.