12

これは私が得たものです：http：
//jsfiddle.net/hashie5/vk6rZ/
（レイアウトを気にしないでください）

最初のテーブルは2番目と3番目のテーブルの組み合わせであり、これを完成させる必要があります。

秒テーブルには並べ替えが可能です（矢印付き）。

3番目のテーブルは選択可能です（矢印をクリックしないでください）。

目標は、複数のアイテムを選択するときに、それらすべてを同時に並べ替えることができるようにすることです。

テーブルが原因で難しい場合は、リストを使用した例も最適です。

ヘルパー関数で、選択した（UIで選択したクラス）すべてのアイテムのクローンを作成しようとしましたが、バグが多すぎました

編集：
私は新しいフィドルを作成しました：http：//jsfiddle.net/hashie5/AZr9Z/
これはうまく機能しますが、まだ100％完全ではありません

4

5 に答える 5

12

メインコードは以下のようになります。

sort : function(event, ui) {
    var $helper = $('.ui-sortable-helper'), hTop = $helper.offset().top, hStyle = $helper.attr('style'), hId = $helper.attr('id');
    if (first_rows.length > 1) {
        $.each(first_rows, function(i, item) {
            if (hId != item.id) {
                var _top = hTop + (26 * i);
                $('#' + item.id).addClass('ui-sortable-helper').attr('style', hStyle).css('top', _top);
            }
        });
    }
},
start : function(event, ui) {
    if (ui.item.hasClass('ui-selected') && $('.ui-selected').length > 1) {
        first_rows = $('.ui-selected').map(function(i, e) {
            var $tr = $(e);
            return {
                tr : $tr.clone(true),
                id : $tr.attr('id')
            };
        }).get();
        $('.ui-selected').addClass('cloned');
    }
    ui.placeholder.html('<td colspan="99">&nbsp;</td>');
},
stop : function(event, ui) {
    if (first_rows.length > 1) {
        $.each(first_rows, function(i, item) {
            $(item.tr).removeAttr('style').insertBefore(ui.item);
        });
        $('.cloned').remove();
        first_rows = {};
    }
    $("#uber tr:even").removeClass("odd even").addClass("even");
    $("#uber tr:odd").removeClass("odd even").addClass("odd");
}

とにかく、コードが実際に何をしているのか、私はあなたが何を望んでいるのか理解できていません：

  1. 最初のテーブルから、複数のアイテムを選択します。
  2. 選択したアイテムの1つにカーソルを合わせます。
  3. 選択したものをリスト内の好きな場所に移動できます。
  4. 選択したすべてのアイテムの並べ替え順序を管理します。

これがあなたが探しているものであることを願っています。

于 2012-06-22T08:59:20.600 に答える
2

あなたの「jsfiddle」はかなりうまく機能します…しかし、jquery-uiがテキストの選択と他の何をすべきかをうっとうしく主張することに不満を感じるときはいつでも、このスニペットを参照します。

// disables text selection on sortable, draggable items 
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();

「無効」を「有効」に切り替えることができるかどうかはわかりませんが、私の$.02があります。また、誰かが同じ「グループ」要素内に「非アクティブなセクション」を定義し、ドラッグアクションの「ハンドル」を提供するためのブラウザ/デバイスが不足している場合に備えて、その種の良いアイデアです...（フィドルの矢印のように） -type-things）または、これらのクリックは、選択/編集の意図と容赦なく誤解される可能性があります…</ p>

于 2012-06-21T05:00:41.330 に答える
2

Matthew Andersenによって作成された要点は完全に機能します：https ：//gist.github.com/mattandersen/9777423

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" />

    <style>
        #list {
            list-style: none;
            padding-left: 0;
        }

        #list .sort-handle {
            display: none;
        }

        #list .ui-selected .sort-handle
         {
            display: inline;
            padding: 0 0.5em;
            cursor: pointer;
        }

        li.ui-selected {
            background-color: #8888cc;
            color: white;
            font-weight: bold;
            background-image: none;
        }
        li.ui-selecting {
            background-color: #ccccff;
            color: white;
            background-image: none;
        }

    </style>
</head>
<body>
    <ul id="list">
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 1</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 2</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 3</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 4</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 5</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 6</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 7</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 8</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 9</li>
        <li class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 10</li>
    </ul>

    <script>
        $(function() {
            $('#list').selectable({
                cancel: '.sort-handle'
            }).sortable({
                items: "> li",
                handle: '.sort-handle',
                helper: function(e, item) {
                    if ( ! item.hasClass('ui-selected') ) {
                        item.parent().children('.ui-selected').removeClass('ui-selected');
                        item.addClass('ui-selected');
                    }

                    var selected = item.parent().children('.ui-selected').clone();
                    item.data('multidrag', selected).siblings('.ui-selected').remove();
                    return $('<li/>').append(selected);
                },
                stop: function(e, ui) {
                    var selected = ui.item.data('multidrag');
                    ui.item.after(selected);
                    ui.item.remove();
                }
            });
        });
    </script>
</body>

デモ： http： //jsfiddle.net/ghaq69b3/

于 2015-04-09T10:15:53.713 に答える
1

私はこれをテストしていませんが、ここにアイデアがあります：

最初のリストを選択可能にします（ただし、並べ替えはできません）。次に、選択が終了したら、選択をdivでラップし、そのdivを並べ替え可能にします。このようにして、選択を1つとしてドラッグします。

于 2012-06-16T11:41:34.333 に答える
0 
$( "#list" )
  .sortable({ handle: ".handle" })
  .selectable()
  .find( "li" )
  .addClass( "ui-corner-all" )
  .prepend( "<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>" );
于 2013-07-15T14:12:24.043 に答える