3

私はいくつかの教育サイトを作成しようとしていますが、次の段階に進む前に、生徒にアイテムを領域にドラッグしてもらいたいと考えています。

これを行う方法は、jquery droppables スクリプトを使用し、ドロップ可能な div にドロップされたときにアイテムのドラッグ可能なオプションを無効にすることでした。次に、変数に 1 を追加しようとしました。正しい数値になると、進むボタンが有効になります。

問題は、ドロップ可能な機能を特定のドラッグ可能なものごとにのみ機能させる方法がわからないことです。だから私が持っているものは次のとおりです：

$(document).ready(function() {
    $("#draggable").draggable();
    $("#draggable2").draggable();
    $("#droppable").droppable({
      drop: function() { $( "#draggable" ).draggable( "option", "disabled", true );; }
    });
  });

これらのdivで;

<div id="droppable">Drop here</div>
<div id="draggable" class="drag">Drag me</div>
<div id="draggable2" class="drag">Drag me</div>

しかしもちろん、これが行うことは、ドロップ可能な div にドラッグされるたびに、最初のドラッグ可能なものを無効にすることだけです。私のjavascriptはあまり良くありません（学習中です）。ドロップ可能な領域に入れたものだけを無効にする方法がわかりません。

誰でも助けてもらえますか？

4

2 に答える 2

0

scopeこれは、ドラッグ可能な領域とドロップ可能な領域の両方に a を定義することで実現できます。

$(function() {
    $('.drag').draggable({
        revert: "invalid",
        scope: "items"
    });
    $('#droppable').droppable({
        scope: "items"
    });
});

例 リンク。

于 2010-12-30T19:00:07.973 に答える