Home/ Questions/Q 8404525
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T22:37:18+00:00

In jQuery UI sortable accordian, how do I handle the item release event? I

  • 0

In jQuery UI sortable accordian, how do I handle the item release event?
I tried this:

$('#accordion').mousedown(function() {
    alert('Handler for .mousedown() called.');
});

But the result is not correct. The item is always sticking to the mouse… On mouse down, the popup shows, and if you click ok, the item is still sticking to the mouse.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

        <style>
        /* IE has layout issues when sorting (see #5413) */
        .group { zoom: 1 }
        </style>
        <script>
        $(function() {
            $( "#accordion" )
                .accordion({
                    header: "> div > h3"
                })
                .sortable({
                    axis: "y",
                    handle: "h3",
                    stop: function( event, ui ) {
                        // IE doesn't register the blur when sorting
                        // so trigger focusout handlers to remove .ui-state-focus
                        ui.item.children( "h3" ).triggerHandler( "focusout" );
                    }
                });
        });


        function show_progress() {
            var items = $('.group', '#accordion');
            for(var i=0; i<items.length; i+=1) {
                alert(items[i].innerHTML);
            }
        }


        </script>

        <div id="accordion">
            <div class="group">
                <h3><a href="#">Section 1</a></h3>
                <div>
                    <a href="#">Edit Item</a>
                    <span class="svr_rlv_url"></span>
                </div>
            </div>
            <div class="group">
                <h3><a href="#">Section 2</a></h3>
                <div>
                    <a href="#">Edit Item</a>
                    <span class="svr_rlv_url"></span>
                </div>
            </div>
            <div class="group">
                <h3><a href="#">Section 3</a></h3>
                <div>
                    <a href="#">Edit Item</a>
                    <span class="svr_rlv_url"></span>
                </div>
            </div>
            <div class="group">
                <h3><a href="#">Section 4</a></h3>
                <div>
                    <a href="#">Edit Item</a>
                    <span class="svr_rlv_url"></span>
                </div>
            </div>
        </div>

        <br/>

        <a href="#" onclick="show_progress();">CLICK</a>

        <script>
            $('#accordion').mousedown(function() {
              alert('Handler for .mousedown() called.');
            });
        </script>

    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should not alert in the middle of a script, this is what happens in the script:

    • Mouse down – item gets draggable
    • alert – javascript PAUSES
    • You release your mouse to click the ok, but javascript does not know this because the script is paused
    • when the alert is closed, javascript still thinks you are holding your mouse button down, so the item sticks to your mouse.

    Just remove the alert and do console.log('Handler for .mousedown() called.'); instead

    • 0