0

ドラッグポータルが列を離れると「sortout」イベントが発生することを期待しています。「sortover」イベントは期待どおりに発生します。これが機能するか、jqueryUIが壊れているかはわかりません。

これがデモコードですhttp://jsfiddle.net/kY7SV/6/ すべてのポートレットを列からドラッグすると、折りたたまれるはずです。折りたたまれた列の上にポートレットをドラッグすると、展開されます。

ヘルプをいただければ幸いです

Merlynの重要な部分を編集します。

<ul id="sm" class="sm">
    <li id=list1><div style="background-color:red">1</div>
        <div class="column" id='col1'>
            <div class="portlet">
                <div class="portlet-header">Feeds</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            <div class="portlet">
                <div class="portlet-header">News</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
        </div>
    </li>
    <li id=list2><div style="background-color:yellow">2</div>
        <div class="column" id='col2'>
            <div class="portlet">
                <div class="portlet-header">Shopping</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            <div class="portlet">
                <div class="portlet-header">Messages</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
        </div>
    </li>
    <li id=list3><div style="background-color:blue">3</div>
        <div class="column" id='col3'>
            <div class="portlet">
                <div class="portlet-header">Links</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            <div class="portlet">
                <div class="portlet-header">iMAGES</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
        </div>
    </li>
</ul>
​
$(function() {
    $(".column").sortable({
        connectWith: ".column"
    });

    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all").find(".portlet-header").addClass("ui-widget-header ui-corner-all").prepend("<span class='ui-icon ui-icon-minusthick'></span>").end().find(".portlet-content");

    $(".portlet-header .ui-icon").click(function() {
        $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });

    $(".column").disableSelection();

    $(".column").bind("sortremove", function(event, ui) {
        var listitem = $(this).parents('li');
        var cnt = $(this).children().length;
        if (cnt < 1) {
            $(listitem).css('maxWidth', '25px');
        }
    });

    $(".column").bind("sortover", function(event, ui) {
        var listitem = $(this).parents('li');
        $(listitem).css('maxWidth', '');
    });

    $(".column").bind("sortout", function(event, ui) {
        var listitem = $(this).parents('li');
        var cnt = $(this).children().length;
        if (cnt < 1) {
            $(listitem).css('maxWidth', '25px');
        }
    });

    $(".column").bind("sortreceive", function(event, ui) {
        var listitem = $(this).parents('li');
        $(listitem).css('maxWidth', '');
    });

});​
4

1 に答える 1

0

問題

問題は、間違ったアイテムを選択していることです。にはli常に、 textdivと containerの 2 つの子が含まれdivます。アイテムが直接含まれているわけではありません。

ui.senderただし、ソースliを直接提供しているようです。$(ui.sender).children().count呼び出して、ドラッグしている列の数を取得できます。

イベント中の子の数は、ドラッグを実行している間outは常に1以上であり、ドロップが発生した場合にのみカウントが になります0。これはおそらく、イベントが発生するタイミング、またはドラッグ中に何らかのプレースホルダー要素が残る可能性があるという事実に関係しています。

推奨される解決策

少なくともoutイベントに関しては、デモを再考することをお勧めします。そのイベント内からいつまだドラッグしているか、いつドラッグを終了したかを判断するのは難しいロジックです。outまた、物をドラッグしている間、大きなドロップ ターゲットを残すのも優れた UI デザインです。

およびイベントには、はるかに明白なカウントがありますremove。receiveこれらのイベントのサイズ変更に固執します。

これをどのように理解したか

JavaScript コンソール (ブラウザで F12 キー) を開き、outイベント内にコンソール書き込みステートメントを挿入しました。クロムでは、これはconsole.out(...item to log here...). 利用可能なさまざまなオブジェクト ( this、event、 ) をいじって、さまざまな HTML 要素のプロパティuiをチェックしました。outerHTML

正しい要素を選択する方法を理解したら、問題のカウント部分を理解する簡単な方法は、要素のテキストを現在の子カウントで更新することです。次に、列ごとにリアルタイムで更新されます。ログを記録していたところ2、 で永続的にスタックしていることに気付きました。これにより、間違った要素が選択されていることがわかりました。

ノート

のすべてのプロパティがどうあるべきかわかりませんthisが、それらは時間の経過とともに変化しているように見えました。 ドキュメントはあまり役に立ちません。JavaScriptイベント（一般的に）についてもっと知っていれば、それを理解するのに役立つかもしれません:)

于 2012-04-26T04:52:32.193 に答える