我试图做一个简单的难题。移动选定的div 1时，它必须交换放置它的div 2的位置，并且div 2必须替换div 1的位置。如果将蓝色放为红色，则可以看到此内容。如何对所有元素使用此规则？
我看到了很多可以解决此问题的插件-但不喜欢在我的项目中使用借来的代码，因此，如果有人提出建议或告诉我如何做，我将不胜感激。
http://jsfiddle.net/fresa150/6Ghr5/3/
<table>
<tr>
<td class="drop"><div class="red"></div></td>
<td class="drop"><div class="blue"></div></td>
<td class="drop"><div class="grey"></div></td>
<td class="drop"><div class="yellow"></div></td>
</tr>
</table>
================================================== ====
.drop{
border:1px solid black;
width:5em;
height:5em;
padding: 1em;
}
.red{
border:1px solid black;
width:5em;
height:5em;
background:red;
color:white;
}
.blue{
border:1px solid black;
width:5em;
height:5em;
background:blue;
color:white;
}
.grey{
border:1px solid black;
width:5em;
height:5em;
background:grey;
color:white;
}
.yellow{
border:1px solid black;
width:5em;
height:5em;
background:yellow;
color:white;
}
==================================================
$('.red,.blue,.grey,.yellow').draggable({
helper : 'original',
opacity : 0.5,
axis:'x'
});
var blueOffset = $('.blue').offset();
var redOffset = $('.red').offset();
$('.drop').droppable({
drop : function(event, ui) {
$('.red').offset(blueOffset);
$('.blue').offset(redOffset);
}
});
您遇到的部分问题是，您在函数之外重新定义了blueOffset和redOffset变量，因此，每当触发.drop（）时，您都在使用原始偏移量来确定div应该移动到的位置，这就是为什么这只能在第一次使用的原因。
你需要做的是确定，其中一些被动态每次删除一个元素时下降。我相信您最好还是使用Draggable的stop属性，而不是使用单独的droppable函数。这是一个小提琴，应该帮助您入门：http : //jsfiddle.net/2MYkV/
和我使用的代码：
$('.drag').draggable({
helper : 'original',
opacity : 0.5,
axis:'x',
revert: true,
stop: function(event) {
var dropelt = document.elementFromPoint(event.clientX, event.clientY);
var dropcell = dropelt.tagName == "td" ? $(dropelt) : $(dropelt).closest('td');
var dropdiv = dropcell.find('div');
var origcell = $(this).parent('td');
var origdiv = origcell.find('div');
origdiv.detach();
dropdiv.detach();
origcell.append(dropdiv);
dropcell.append(origdiv);
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句