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函数添加到 droppable 中，我更新了链接和代码。

解决方案

于 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');
    },
});

您可以在 codebins 上找到完整的解决方案，因此请点击http://codebins.com/codes/home/4ldqpbs

于 2012-07-03T14:54:26.247 回答