我有以下在容器 div 中随机化 div 的方法。正如您在此 fiddle 中所见,工作正常.
<div id='draggables_container'>
<div class='draggable' id='d1'></div>
<div class='draggable' id='d2'></div>
<div class='draggable' id='d3'></div>
<div class='draggable' id='d4'></div>
<div class='draggable' id='d5'></div>
</div>
function randomiseDraggables(){
var parent = $("#draggables_container");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
}
如何更改此设置,以便元素在容器内具有随机的绝对位置(它们当前设置为 float:left
)并随机旋转并且最好不相互重叠?
最佳答案
解决方案如上所述:
HTML
<div id='draggables_container'>
<div class='draggable' id='d1'></div>
<div class='draggable' id='d2'></div>
<div class='draggable' id='d3'></div>
<div class='draggable' id='d4'></div>
<div class='draggable' id='d5'></div>
</div>
CSS
#draggables_container {
float:left;
height:auto;
width:600px;
border: 1px solid #6ac1cb;
border-radius: 4px;
}
.draggable {
float:left;
height:120px;
}
#d1 {
width:20%;
background-image: url(http://130.95.21.121/karyotypes/trisomy_21/images/1_a.png);
background-repeat:no-repeat;
}
#d2 {
width:20%;
background-image: url(http://130.95.21.121/karyotypes/trisomy_21/images/1_b.png);
background-repeat:no-repeat;
}
#d3 {
width:20%;
background-image: url(http://130.95.21.121/karyotypes/trisomy_21/images/2_a.png);
background-repeat:no-repeat;
}
#d4 {
width:20%;
background-image: url(http://130.95.21.121/karyotypes/trisomy_21/images/2_b.png);
background-repeat:no-repeat;
}
#d5 {
width:20%;
background-image: url(http://130.95.21.121/karyotypes/trisomy_21/images/3_a.png);
background-repeat:no-repeat;
}
j查询
function randomiseDraggables() {
var parent = $("#draggables_container");
var divs = parent.children();
divs.each(function() {
var rt = (Math.floor(Math.random() *359));
var rn = (Math.floor(Math.random() *50));
$(this).css({'transform':'rotate(' + rt + 'deg)','background-position' : '0% ' + rn + '%'});
});
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
}
randomiseDraggables();
$(".draggable").draggable({
stack: '#draggables_container div',
revert: true
});
关于javascript - JQuery - 随机化元素在容器内的绝对位置和旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28492255/