0

これが私が抱えている問題です。ドラッグ可能な要素をいくつか作成しましたが、ドロップ可能な要素に1つドロップすると、そこに留まりません。以下は詳細です。

私の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
         } )

これまでのところ、すべてが期待どおりであり、要素（'items'配列から作成）をドラッグできます。

次に、以下に示すようにドロップ可能な要素を作成しました。

         $( "#dropp" ).droppable({
         drop: function() {
         alert('ok');
             }
         });
    }// End function init()
</script>

しかし、ドラッグ可能な要素の1つをこのドロップ可能な要素にドラッグすると、アラートが表示されますが、ドラッグ可能な要素はドロップ可能な要素に留まりません。

ドラッグ可能な要素がドロップ可能な要素に留まらない理由を特定するのを手伝ってもらえますか？

助けてくれてありがとう！

4

2 に答える 2

1

あなたは使用revert :trueしました..それは意味します

元に戻す とは、trueに設定すると、ドラッグが停止したときに要素が開始位置に戻ることを意味します。可能な文字列値：'valid'、'invalid'。無効に設定すると、ドラッグ可能オブジェクトがドロップ可能オブジェクトにドロップされていない場合にのみ復帰が発生します。有効な場合は、その逆です。

おそらく、要素が適切な要素にドロップされないinvalid場合に必要ですdraggable

于 2012-09-25T15:31:04.587 に答える
0

私を正しい方向に向けてくれてありがとう。私はこの特定の問題を次の方法で解決しました。

ドロップ可能なコードを次のように編集しました。

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

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

これにより、ドラッグ可能オブジェクトがドロップ可能オブジェクト上に留まらないという問題が解決されました（前述のとおり）。

于 2012-09-25T16:39:36.510 に答える