我想要帮助安排图像。我有这张桌子,我希望图像以某种顺序出现,例如B A G D ....(从左到右)。
代码可以找到here。
看到这个answer。这是你可能会问的。
我为你创造了一个完美的修改功能
function sorter(selector, order) {
selector.each(function() {
if(order) {
for(var i =0; i < order.length; i++){
$("#sorted").append($(this).children('img[id='+order[i]+']'));
}
}
});
}
sorter($("div"), ['a','c','d']);
通过简单地使用appendTo()
重新排列img
s,这是一种快速而肮脏的方法:
var order = ['b', 'a', 'g', 'd', 'h', 'c', 'i', 'f', 'e'];
$('img').parent().each(function(x) {
$('#'+order[x]).appendTo($(this));
});
但是:ぁzxswい
而且,我之前已经说过,但你应该考虑摆脱你的内联JavaScript。内联代码已过时,使代码维护和调试变得更加困难。在jQuery中使用事件绑定,例如使用http://jsfiddle.net/jtbowden/HFu7j/。
只需按照您希望它们流动的顺序重新排列代码。例如:
.on()
会成为
<img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-A-dg-icon.png" ondragstart="drag(event);" id="a" draggable="true"/>
</div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-B-dg-icon.png" ondragstart="drag(event);" id="b" draggable="true"/> </div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-C-dg-icon.png" ondragstart="drag(event);" id="c" draggable="true"/> </div>
</td>
</tr>
<tr>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-D-dg-icon.png" ondragstart="drag(event);" id="d" draggable="true"/> </div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-F-dg-icon.png" ondragstart="drag(event);" id="f" draggable="true"/> </div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-G-dg-icon.png" ondragstart="drag(event);" id="g" draggable="true"/> </div>
</td>
</tr>
<tr>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-H-dg-icon.png" ondragstart="drag(event);" id="h" draggable="true"/> </div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-I-dg-icon.png" ondragstart="drag(event);" id="i" draggable="true"/> </div>
</td>
<td>