27

並べ替え可能なリストが必要ですが、そのリスト内の要素を、ドロップ可能として定義した div にドロップできるようにしたいです。私はそれを行う方法を見つけることができないようです。何か案は？

4

6 に答える 6

22

これは、コリンのソリューションの簡略化されたバージョンです。

最大の違いは、このソリューションはソート可能な要素の html 全体を保存するのではなく、現在ドラッグされているアイテムのみを保存することです。アイテムがドロップ可能領域にドロップされると、元の位置に挿入されます。

とにかく、ここにコードがあります：

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var dropped = false;
    var draggable_sibling;

    $("#sortable").sortable({
        start: function(event, ui) {
            draggable_sibling = $(ui.item).prev();
        },
        stop: function(event, ui) {
            if (dropped) {
                if (draggable_sibling.length == 0)
                    $('#sortable').prepend(ui.item);

                draggable_sibling.after(ui.item);
                dropped = false;
            }
        }
    });

    $(".droppable").droppable({
        activeClass: 'active',
        hoverClass:'hovered',
        drop:function(event,ui){
            dropped = true;
            $(event.target).addClass('dropped');
        }
    });
});

</script>

<style type="text/css">
#sortable li{
    clear:both;
    float:left;
}

.droppable {
    clear:both;
    height:300px;
    width:400px;
    background-color:#CCC;
}

.droppable.active { background: #CFC; }
.droppable.hovered { background: #CCF; }
.dropped { background: #f52; }
</style>

</head>
<body>

<ul id="sortable">
    <li id="one">One</li>
    <li id="two">Two</li>
    <li id="three">Three</li>
    <li id="four">Four</li>
    <li id="five">Five</li>
    <li id="six">Six</li>
</ul>

<div class="droppable">Drop Here</div>
<div class="droppable">Drop Here</div>

</body>
</html>

<ul>アイテムがリスト内の新しい位置にドラッグされ、と droppable の両方の外にドロップされた場合、Colin のソリューションと同じ問題が依然として発生し<div>ます。アイテムはリセットされませんが、リストの最後の位置になります (Google Chrome でテスト済み)。とにかく、これはマウスオーバー検出で簡単に解決されるか、望ましい動作でさえあるかもしれません。

于 2010-12-05T23:49:38.127 に答える
4

私が知る限り、私が投稿した以前のコードの問題は、ドロップ可能なドロップ関数がソート可能なマウスアップの前に呼び出されていたことです。 ）。ある程度の推測です。

最終的なコードを見る：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">

var dropped = false;
var templateHtml;
$(document).ready(function(){

    setSortable();

    $("#droppable").droppable({
        activeClass: 'active',
        hoverClass:'hovered',
        accept:".drop",
        drop:function(event,ui){
            dropped = true;
            //alert(ui.draggable.text());
        }
    });

});

function setSortable(){
    $("#sortable").sortable({
        stop:function(event,ui){
            if(dropped){
                $("#sortable").sortable('destroy').html(templateHtml);
                dropped = false;
                setSortable();
            }
        }
    });

    $("#sortable li").addClass("drop").bind('mousedown',function(){
        templateHtml = $("#sortable").html();
    });
}

    </script>
    <style type="text/css">
    #sortable li{
        clear:both;
        float:left;
    }

    #droppable {
        clear:both;
        height:300px;
        width:400px;
        background-color:#CCC;
    }
    #droppable.active {
        background-color:#CFC;
    }
    #droppable.hovered {
        background-color:#CCF;
    }
    </style>

</head>
<body>

<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>

<div id="droppable">
Drop Here
</div>

</body>

ここにはたくさんの癖があります。

sortable の開始イベントで #sortable html を保存しようとしましたが、すべての ui-css が適用された後に get が呼び出され、リスト要素がクレイジーな場所に配置されてしまいました。そのため、LI でマウスダウン機能を使用する必要がありました。

停止イベントがソート可能を書き換えるため、setSortableは関数内にあります。これは「再帰的」だと思います。ここでの正確な用語はわかりませんが、厄介な混乱を招く可能性があります。

幸いなことに、droppable の drop 関数は sortables の stop 関数の前に呼び出されるため、要素がドロップされたかどうかを確認するために使用されるグローバルな "dropped" 変数を設定することができました。

これを行うのが簡単ではないことに今でも驚いています。jQuery にはそれを処理するための関数がはるかに優れていると思っていました。おそらく私は何かを逃していますか？

于 2010-01-20T07:59:16.750 に答える
0

他のドロップ可能な領域もソート可能にすることができる場合は、共通のセレクターでconnectWithオプションを使用できます。

<div id="droppable1" class="droppable-area"></div>
<div id="droppable2" class="droppable-area"></div>
<div id="droppable3" class="droppable-area"></div>

jQueryコードは次のようになります。

$('.droppable-area').sortable({ connectWith: '.droppable-area' });

このソリューションはとにかく私にとっては美しく機能しました。

于 2013-01-24T20:58:49.297 に答える
0

私はこれに一日中費やしました、そして私はずっと近づきました、しかしそれでも私が望むほどうまくいっていません。これで必要な機能が得られましたが、Javascriptエラーがスローされます。

問題は、要素がリストではなくドロップ可能にドロップされた場合に、ソート可能リストを前の位置に戻すことです。現在、html onmousedownを保存してから、droppableのdrop関数でhtmlを書き直しています。これは機能しますが、jquery変数を取得するとnullエラーになります。誰かがより良い解決策を見つけることができますか？

コード：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script type="text/javascript">

var templateHtml;
$(document).ready(function(){

    $("#sortable").sortable();
    $("#sortable li").addClass("drop").bind('mousedown',function(){
        templateHtml = $("#sortable").html();
    });
    $("#droppable").droppable({
        activeClass: 'active',
        hoverClass:'hovered',
        accept:".drop",
        drop:function(event,ui){
            $("#sortable").sortable('destroy').html(templateHtml);
            $("#sortable").sortable();
            $("#sortable li").addClass("drop").bind('mousedown',function(){
                templateHtml = $("#sortable").html();
            });          
        }
    });

});

    </script>
    <style type="text/css">
    #sortable li{
        clear:both;
        float:left;
    }

    #droppable {
        clear:both;
        height:300px;
        width:400px;
        background-color:#CCC;
    }
    #droppable.active {
        background-color:#CFC;
    }
    #droppable.hovered {
        background-color:#CCF;
    }
    </style>

</head>
<body>

<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>

<div id="droppable">
Drop Here
</div>

</body>
于 2010-01-20T01:46:59.353 に答える
0

ターゲット DIV のそれぞれを独自のソート可能にすることで、同様の最終結果を得ることができました。

次に、connectWith を使用して、すべてのソート可能オブジェクトを接続してドラッグ可能オブジェクトを共有できるようにしました。

何かのようなもの：

var connects = '#main_sortable, div.target';
$('#main_sortable').sortable({ connectWith: connect });
$('div').sortable({ connectWith: connect} );
于 2011-05-02T00:48:39.937 に答える