5

アイテムをドラッグ＆ドロップしてジュエリーしたい。

現在、複数のアイテムを含む「ストレージ」があります。

他のサイトには x ボックスがあります。各ボックスには 1 つのアイテムのみを含めることができます。

現在、droppable 関数を使用して、ボックスに別のクラスを設定します。追加できるボックスは 1 つだけで、次のように機能します。

 $( ".droppable" ).droppable({
     accept: ".draggable",
     activeClass: "draghover",
     drop: function( event, ui ) {
         if($( this ).hasClass("droppable")) {
             $( this ).removeClass("droppable").addClass( "droppable-");
         }
     } });

ここで、アイテムをストレージまたは別のボックスに戻すときに、クラスを元に戻す必要があります。draggable.start 関数でこれを試しましたが、正しいparent()を取得できません

$( ".draggable" ).draggable({
        revert: "invalid",
        snap: ".droppable",
        snapMode: "inner",
        start: function( event, ui ) {
            alert($( this ).parent().attr("Class"));

        }
    });

これにより、最初のドラッグの前に常に開始位置が返されます。最新の位置ではありません。

ストレージは次のようになります。

<td valign="top" class="warenlager" bgcolor="grey" width="200">
    <div class="draggable" class="bild ui-widget-content" id="s73-1">S</div>
    <div class="draggable" class="bild ui-widget-content" id="s74-1">S</div>
</td>

ボックスは次のようになります。

<td><div class="droppable" id="element 2"></div></td>

よろしく

4

3 に答える 3

3

ドラッグ可能な要素がドロップ可能要素から削除された後にボックスのクラスを元に戻したい場合 (これはあなたが求めていると思います)、out イベント ハンドラーを使用すると、コードは次のようになります。

 $( ".droppable" ).droppable({
 accept: ".draggable",
 activeClass: "draghover",
 drop: function( event, ui ) {
     if($( this ).hasClass("droppable")) {
         $( this ).removeClass("droppable").addClass( "droppable-");
     }
 },
 out: function()
 {
     $(this).addClass("droppable").removeClass( "droppable-");
 }
 });

お役に立てれば ：）

于 2012-08-21T10:29:08.870 に答える