3

特定の場所に戻る場合、ドラッグ可能な色を変更しようとしています。この例では、右側の緑のボックスにドラッグすると、赤いボックスが青に変わります。ボックスを別のボックスの上にドラッグすると、元の場所に戻るように設定しました。しかし、ボックスが左側のコンテナに戻っている場合は、手動でそこにドラッグすると赤色に戻ります。ボックスが左のコンテナにある場合は常に赤になるようにすることもできますが、その方法がわかりません。どんな助けでも大歓迎です。前もって感謝します。

フィドル!!!

HTMLは次のとおりです。

<div id="box">
    <div class="peg">&nbsp;</div>
    <div class="space">&nbsp;</div>
    <div class="peg">&nbsp;</div>
</div>

<div id="game">
    <ul class="row">
        <li class="hole">&nbsp;</li>
        <li class="hole">&nbsp;</li>
    </ul>
</div>

CSS:

#game {
    position: absolute;
    top: 15px;
    left: 135px;
    background: wheat;
    padding: 15px;
    padding-bottom: 0;
}

.row {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: 75px;
    margin-bottom: 15px;
    background-color: olive;
}

.hole {
    width: 75px;
    height: 75px;
    float: left;
    background-color: aqua;
    opacity: 0.3;
    margin-left: 6px;
}

#box {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 90px;
    padding-bottom: 15px;
    background-color: wheat;
    padding-top: 15px;
    padding-left: 15px;
}

.peg {
    width: 75px;
    height: 75px;
    background-color: red;
    z-index: 1;
}
.space {
    height: 15px;
    width: 75px;
}

.top {
    background-color: blue;
    width: 75px;
    height: 75px;
    z-index: 1;
}
​

Javascript:

$('.peg' ).draggable({
    snap: ".hole", 
    snapMode: "inner", 
    snapTolerance: 40, 
    //scope: "zappa",
    //revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    },
    //helper: "clone"
});    

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

$('.peg').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});

$('.hole').droppable({
     drop: function(e,ui) {
          $(ui.draggable).removeClass('peg').addClass('top');
     },
     //scope: "zappa"
});

$('#box').droppable({
     drop: function(e,ui) {
          $(ui.draggable).removeClass('top').addClass('peg');
     },
     //scope: "zappa"
});
​
4

2 に答える 2

2

代わりに、 のコントロール クラスを作成して$('.hole').droppable(...)、ボックスが既に穴にある場合に他のボックスがまったく変更されないようにすることができます。

 $('.hole').droppable({
   drop: function(e,ui) {
     //Check the hole control class
     if(!$(this).hasClass('full')){

         //its empty so change the class of the box
         $(ui.draggable).removeClass('peg').addClass('top');

         //if you want to prevent the box in the hole from being draggable again uncomment next line
         //$(ui.draggable).unbind('mousedown');

         //put the hole control class
         $(this).addClass('full')
     }else{
         //its full
     }                   
   },
   out: function(){ 
        //if the item can go out of the hole then

        //remove the hole control class
        $(this).removeClass('full')
   }

 });

アップデート

穴からボックスを取り出したときに何が起こるかを制御する必要がある場合は、out関数をドロップ可能に追加して、リンクとコードを更新しました。

解決

于 2012-07-02T22:28:37.937 に答える
0

以下に示すように、上記の問題を解決することもできます。

jQuery の別の方法:

$('.peg').draggable({
    snap: ".hole",
    snapMode: "inner",
    snapTolerance: 40,
    stop: function() {
        $(this).draggable('option', 'revert', 'invalid');
    }
});

$('.peg').droppable({
    tolerance: 'fit',
    greedy: true,
    tolerance: 'touch',
    drop: function(event, ui) {
        ui.draggable.draggable('option', 'revert', true);
    }
});

$('.hole').droppable({
    drop: function(e, ui) {
        $(ui.draggable).switchClass('peg', 'top');
    },
});

$('#box').droppable({
    drop: function(e, ui) {
        $(ui.draggable).switchClass('top', 'peg');
    },
});

コードビンで完全なソリューションを見つけることができるので、http: //codebins.com/codes/home/4ldqpbs をクリックしてください。

于 2012-07-03T14:54:26.247 に答える