1

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

2 回答 2

1

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

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

只需删除警报并console.log('Handler for .mousedown() called.');改为

于 2012-08-20T20:45:52.297 回答
0

您在 mousedown 中的警报正在弄乱脚本。无论如何，您不需要寻找 mousedown，您已经有一个停止回调函数附加到您的可排序初始值设定项。只需通过查找ui.item当前拖动的项目来添加您的代码。

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

于 2012-08-20T20:51:28.093 回答