0

JQuery UI を使用してドラッグ アンド ドロップ機能を実装しました。現在のコードを以下に示します。

私の JavaScript 関数は、PHP から JSON 配列を受け取り、ループを使用してドラッグ可能な要素を作成します。

<script type="text/javascript">
    function init() {
        var items = <?php echo $result_j;?>; //items is an one dimensional array

        for ( var i=0; i<<?php echo $total_rows_j;?>; i++ ) {      
            $('<div>' + items[i] + '</div>').data( 'item_name', items[i] ).attr( 'class', 'snk_button' ).appendTo( '#drag' );
         }

「items」配列を使用して、いくつかの div 要素 (上記のコード) を作成し、それをドラッグ可能な要素 (以下のコード) に変換します。

         $(".snk_button").draggable( {
            containment: '#drag_section',//Div #drag_section contains the Div #drag 
            stack: '#drag div',
            cursor: 'move',
            revert: true
         } )

以下は私のドロップ可能なコードです：

$( "#dropp" ).droppable(
   drop: handleDrop
});

function handleDrop( event, ui ) {
    ui.draggable.draggable( 'option', 'revert', false );
} // End function handleDrop

これまでのところ、ドラッグ可能なアイテムがドロップ可能な div にアタッチされているため、すべて問題ありません。

ここで、この動作を少し調整したいと思います。

  1. ドラッグ可能なアイテムをドロップ可能な div (この例では「#dropp」と呼ばれます) に「自動的に」配置し、左上から開始します (左にフローティングします)。現在、「#dropp」div に「float:left」プロパティが設定されていても、これは発生していません。では、「#dropp」にドロップしたときにドラッグ可能なアイテムを配置するにはどうすればよいですか?
  2. ドロップ可能な div ('#dropp') からドラッグ可能なアイテムを取り出すと、最初にドラッグ可能なアイテムが含まれていた div (この例では '#drag') に戻ります。

これら 2 つの動作の実装を手伝っていただけますか?

4

1 に答える 1

2

これを自分で試し、5 ～ 6 時間近く R&D を行った後、両方の問題を解決することができました。同じ問題に直面している可能性のある他の人のために、上記の動作を実装するために必要な追加のコードを以下に示します。

$( "#dropp" ).droppable({
    accept: '#drag div',
    drop: function(event, ui)
    {
    $("div#dropp").append (ui.draggable); 
    $(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" })
               .addClass("moved");
    } // End function for handling drop on '#dropp'
}); //End $( "#dropp" ).droppable

これは新しく追加されました：

$( "#drag" ).droppable({
accept : ".moved",
drop : function (event, ui)
{
    $("div#drag").append (ui.draggable);
    $(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" });

} // End function for handling drop on '#drag'
}); // End $( "#drag" ).droppable

上記の動作を実装するために必要なのはこれだけです。誰かが役に立つ情報を見つけてくれることを願っています:-)

于 2012-09-26T11:24:35.120 に答える