Javascript 是否可能知道jquery可拖动元素将还原到何处？

如果拖表恢复到某个位置，我将尝试更改拖表的颜色。在本例中，将红色框拖动到右侧的绿色框时，红色框将变为蓝色。我已经设置好了，当你把一个盒子拖到另一个上面时，它会回到原来的位置。但是，如果长方体恢复为左侧的容器，我希望它变回红色，如果您手动将其拖动到那里，它就会变回红色。我也可以这样做，如果一个盒子在左边的容器里，它总是红色的，但我不知道怎么做。非常感谢您的帮助。提前谢谢

以下是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>

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"
});
​  

---

相反，您可以为

$（'.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

功能添加到下拉列表中，我更新了链接和代码

---

我们也可以解决上述问题，如下所示：

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上找到完整的解决方案，所以在来回移动几次后，点击

，盒子停止改变颜色并保持红色…好的，那么你想在盒子到达洞后继续拖动吗？@EH_warch yep！无论你做了什么都解决了：）不知道这与问题有什么不同，在你的解决方案中，如果另一个盒子被放在同一个洞里，那么盒子会变成蓝色而不是红色。是的，这并不能解决问题，当盒子回到左边时，它们不会变成红色。

$('.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');
    },
});