Question

在jQuery UI可排序的手风琴中，我该如何处理项目发布事件？我试过这个：

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

但结果不正确。该项目始终坚持鼠标...在鼠标按下时，弹出窗口显示，如果单击确定，该项目仍然粘在鼠标上。

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

Answer 1

您不应该在脚本中间发出警报，这是脚本中发生的事情：

鼠标按下 - 项目可拖动
提醒 - javascript暂停
您释放鼠标以单击确定，但javascript不知道这是因为脚本已暂停
当警报关闭时，javascript仍然认为您按住了鼠标按钮，因此该项目会粘在您的鼠标上。

只需删除提醒，然后执行console.log('Handler for .mousedown() called.');

Answer 2

你在mousedown内的警报正在弄乱剧本。无论如何你都不需要寻找mousedown，你已经有一个连接到你的可排序初始化器的停止回调函数。只需在ui.item中添加您的代码，因为这是当前拖动的项目。

我在这里设置了一个小提琴：http://jsfiddle.net/nQ4Zq/

如何处理可折叠手风琴中的物品发布事件？

2 个答案: