5

jQuery UI のソート可能なウィジェットに問題があります。空のコンテナにアイテムをドロップすることはできません。コンテナにアイテムがある場合、それは完全に機能します。私はこのようにウィジェットを呼び出します:

$(".apc_row--columns", this.$el).sortable({
    placeholder: 'apc_drop-placeholder-blocked',
    forcePlaceholderSize: true,
    items: '.apc_inner_item',
    connectWith: ".apc_column--content",
    tolerance: "pointer",
    handle: '.move_handle',
    helper: "clone",
    dropOnEmpty: true,
    distance: 0.5,
    stop: function(event, ui){
        that.droppedItem(ui.item, ui.item.index());
    }
});

jQueryが位置を正しく計算できるように、接続されたリスト/コンテナにはパディング/最小高さが必要であることが検索でわかりました。

しかし、接続された div ".apc_column--content" には min-height と padding があります。また、コンテナに「display:none」の項目を配置することもテストしましたが、役に立ちませんでした。

私はそれを動作させることができません（すべてのブラウザをテストしました）。

ありがとうございました。

編集: 問題の jsfiddle を作成: http://jsfiddle.net/Sf5QW/1/

すべてのアイテムを左のリストから右に (または他の方法で) 移動すると、空のリストにアイテムを移動することはできません。

4

4 に答える 4

7

働くフィドル

基本的に、間違った要素にソート可能を設定していました。これを .apc_column--content 要素に変更すると、機能するようになりました。どちらのリストにもそのクラスがあるため、connectWith プロパティもそのクラスに変更する必要がありました。

乾杯。

$(".apc_column--content").sortable({
            placeholder: 'apc_drop-placeholder-blocked',
            forcePlaceholderSize: true,
            items: '.apc_inner_item',
            connectWith: ".apc_column--content",
            tolerance: "pointer",
            dropOnEmpty: true,
            distance: 0.5,
            stop: function(event, ui){
                // that.droppedItem(ui.item, ui.item.index());
            }
});
于 2013-08-10T16:54:09.513 に答える
6

<li></li>この問題を解決するには、空の ul に空の invisible を追加します。^_^

于 2013-12-11T03:33:39.417 に答える
0

ulこれらのcssを要素に追加するだけです

padding: 5px;
background-color: #f3f3f9;

ul要素にパディングを追加する必要があります

于 2019-09-25T02:22:54.660 に答える