Question

我想要帮助安排图片。我有这张桌子，我希望图像以某种顺序出现，例如B A G D ....（从左到右）。

可以找到代码here。

Answer 1

见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']);

Check it out

Answer 2

通过简单地使用appendTo()重新排列img s，这是一种快速而又简单的方法：

var order = ['b', 'a', 'g', 'd', 'h', 'c', 'i', 'f', 'e'];

$('img').parent().each(function(x) {
    $('#'+order[x]).appendTo($(this));
});

演示：http://jsfiddle.net/jtbowden/HFu7j/

而且，我之前已经说过，但你应该考虑摆脱你的内联JavaScript。内联代码已过时，使代码维护和调试变得更加困难。在jQuery中使用事件绑定，例如使用.on()。

Answer 3

只需按照您希望它们流动的顺序重新排列代码。例如：

<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>

会变成

 <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-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-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-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-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-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>

按文件名排序图像

3 个答案: