1

jQuery UIのソート可能なアコーディオンでは、アイテムリリースイベントをどのように処理しますか? 私はこれを試しました：

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

しかし、結果は正しくありません。アイテムは常にマウスにくっついています... マウスを下にすると、ポップアップが表示され、[OK]をクリックすると、アイテムはまだマウスにくっついています。

<!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 一時停止
  • マウスを放して [OK] をクリックしますが、スクリプトが一時停止しているため、javascript はこれを認識しません。
  • アラートが閉じられても、JavaScript はユーザーがマウス ボタンを押し続けていると認識しているため、アイテムがマウスにくっつきます。

アラートを削除してconsole.log('Handler for .mousedown() called.');代わりに実行するだけです

于 2012-08-20T20:45:52.297 に答える
0

マウスダウン内のアラートがスクリプトを台無しにしています。いずれにせよ、mousedown を探す必要はありません。ソート可能なイニシャライザに停止コールバック関数が既にアタッチされています。ui.item現在ドラッグされているアイテムを探して、そこにコードを追加するだけです。

ここにフィドルを設定しました：http://jsfiddle.net/nQ4Zq/

于 2012-08-20T20:51:28.093 に答える