4

現在、Jquery UIドラッグアンドドロップを使用するレイアウトがあります。JqueryWebサイトで元に戻すためのコードを見ましたが、特定のdivでdivがドロップされたかどうか、およびドロップされたかどうかを検出する方法がわかりません。その後、それを元に戻しました。

基本的に私は2つのdivを持っていて、ドラッグアンドドロップが1つの中にドロップできるようにしたいだけです。正しいものにドロップされない場合は、元に戻されます:)

脚本：

 <script type="text/javascript">
function shift(parent){
$("#"+parent).draggable({ handle: ".item", accept: "#floor", containment: "#floor", scroll: false, stack:"#floor div" });
}
</script>

ドラッグ可能：

<div id="drag" class="ui-widget-content" onmousedown="shift('example')"> </div>

DIV

<div id="container">
    <div id="floor"> </div>
    <div id="other"> </div>
</div>

ドラッグ可能なものはコンテナ内にありますが、私はそれを床の中に落とすだけで、他のものには落とさないようにしたいのです。

どんな助けでも大歓迎です

よろしくお願いします！

4

1 に答える 1

10

ヒヤアンドリューワーキングデモ http://jsfiddle.net/BYsnc/

これがお役に立てば幸いです

よく読んでください：http：//docs.jquery.com/UI/Draggable

動作：ユーザーがそれにドラッグすると、他のユーザーがそれをドラッグdrag meしfloorても許可されますotherB-）

説明

JQueryコード

//FloorDivをドロップ可能にします

$('#floor').droppable({
    tolerance: 'fit'
});

//ドラッグdivをドラッグ可能にします

$('#drag').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
});

//最後に、Droppableプロパティについてドラッグに伝えます

$('#drag').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});
​
于 2012-06-01T00:29:07.690 に答える