我应该如何修改这个jQuery UI可拖动代码?
我已经建立了一个JSFIDLE,它演示了我所希望的一切工作,除了当你把红色的“peg”拖到右边的一个绿色框上,然后再把另一个红色的peg拖到它上面时,我希望当它回到左边的框时它会变成红色 HTML: CSS:我应该如何修改这个jQuery UI可拖动代码?,jquery,jquery-ui,draggable,droppable,Jquery,Jquery Ui,Draggable,Droppable,我已经建立了一个JSFIDLE,它演示了我所希望的一切工作,除了当你把红色的“peg”拖到右边的一个绿色框上,然后再把另一个红色的peg拖到它上面时,我希望当它回到左边的框时它会变成红色 HTML: CSS: 在这里粘贴代码。离开小提琴的链接。它相当长-最好只是看看小提琴你的问题将完全无用的未来读者当小提琴去死。请参阅,以获取有关使其更加独立的指南。你花点时间提出一个好问题,我们会花点时间给出一些好答案。酷,对不起,伙计们,我不知道小提琴是致命的,谢谢! <div id="box">
在这里粘贴代码。离开小提琴的链接。它相当长-最好只是看看小提琴你的问题将完全无用的未来读者当小提琴去死。请参阅,以获取有关使其更加独立的指南。你花点时间提出一个好问题,我们会花点时间给出一些好答案。酷,对不起,伙计们,我不知道小提琴是致命的,谢谢!
<div id="box">
<div class="peg"> </div>
<div class="space"> </div>
<div class="peg"> </div>
<div class="space"> </div>
<div class="peg"> </div>
<div class="space"> </div>
<div class="peg"> </div>
</div>
<div id="game">
<ul class="row">
<li class="hole"> </li>
<li class="hole"> </li>
<li class="hole"> </li>
<li class="hole"> </li>
</ul>
<ul class="row">
<li class="hole"> </li>
<li class="hole"> </li>
<li class="hole"> </li>
<li class="hole"> </li>
</ul> </div>
$('.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"
});
#game {
position: absolute;
width: 330px;
height: 400px;
top: 15px;
left: 135px;
background: wheat;
padding: 15px;
}
.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;
}