在组件 (Div) 中选取图像的顺序（拖放 jQuery）答案

【问题标题】：Picking the Order of Images in a Component (Div) (Drag-and-Drop jQuery)在组件 (Div) 中选取图像的顺序（拖放 jQuery）
【发布时间】：2011-03-06 19:13:30
【问题描述】：

我有问题。我有一个 div 组件，我将在其中拖动多个图像。这部分工作完美。但我无法读取这些图像在组件中播放的顺序。发生了什么，我可以在 div 组件的图像中播放任何位置，但是，喜欢按顺序从左到右阅读。

我相信这是可能的，但解决方案一定很复杂。他的一些朋友可以帮我在例行的javascript中阅读这个吗？或者知道任何可以帮助我的技术。

谢谢

页面代码：（所有代码）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1" />
<title>Untitled Document</title>

<link href="jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">

.draggable { 
    width: 90px; 
    height: 80px; 
    padding: 5px; 
    float: left; 
    margin: 0 10px 10px 0; 
    font-size: .9em; 
}

.ui-widget-header p, .ui-widget-content p { 
    margin: 0; 
}

.ui-widget-header-modified p {
    color:#99CC99;          
}

#snaptarget { 
    height: 300px; 
}

</style>

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">

var Cont = 0;
addComponent = function(strImg){
    if ($.trim(strImg) != '')
    {
        Cont = Cont + 1;
        $('#imgPrompt img').remove();
        $('#imgPrompt').prepend('<img id="' + strImg + '_Img' + Cont + '" src="' + strImg + '.gif" />');

        $('#' + strImg + '_Img' + Cont).draggable({ snap: true });
    }
}

 </script>

 </head>
 <body>
<div class="demo">

    <div id="snaptarget" class="ui-widget-header">
        <p>Estrutura do Caminhão:</p>
    </div>

    <div id="snaptarget" style="border:dotted;border-color:#000000;height:310px">

        <div style="float:left;width:15%">
            <center>
                <input type="button" style="width:200px" value="Eixo Livre Roda Simples" onclick="addComponent('eixolivre_rodasimples');"/><br />
                <input type="button" style="width:200px" value="Eixo Livre Roda Única" onclick="addComponent('eixolivre_rodaunica');"/><br />
                <input type="button" style="width:200px" value="Eixo Simples Roda Dupla" onclick="addComponent('eixosimples_rodadupla');"/><br />
                <input type="button" style="width:200px" value="Eixo Tracionado Rodado Duplo" onclick="addComponent('eixotracionado_rodadoduplo');"/><br />
                <input type="button" style="width:200px" value="Eixo Tracionado Rodado Simples" onclick="addComponent('eixotracionado_rodadosimples');"/><br />
                <input type="button" style="width:200px" value="Eixo Trator Roda Dupla" onclick="addComponent('eixotrator_rodadupla');"/><br />
                <input type="button" style="width:200px" value="Eixo Trator Roda Simples" onclick="addComponent('eixotrator_rodasimples');"/><br />
                <input type="button" style="width:200px" value="Eixo Trator Roda Única" onclick="addComponent('eixotrator_rodaunica');"/><br />
                <input type="button" style="width:200px" value="Estepe Duplo" onclick="addComponent('estepe_duplo');"/><br />
                <input type="button" style="width:200px" value="Estepe Simples" onclick="addComponent('estepe_simples');"/><br />
                <input type="button" style="width:200px" value="Estepe Triplo" onclick="addComponent('estepe_triplo');"/><br />
                <input type="button" style="width:200px" value="Alongamento Eixo" onclick="addComponent('estruturaeixo_livre');"/><br />
            </center>
        </div>

        <div id="imgPrompt" style="float:right;width:85%;height:310px;text-align:center">
            <!-- Adicionar as Imagens -->
        </div>

    </div>
</div>
</body>
</html>

【问题讨论】：

我不确定我是否理解；您希望能够按照图像在 DOM 中出现的实际顺序遍历图像吗？嗯，这就是你用 jQuery 找到元素时得到的顺序......
@Pointy 我想知道显示的顺序。我认为这与文档（创建）的顺序不同。有可能吗？
“拖放”代码是否使用 CSS 定位来排列它们，以便它们以不同于 DOM 顺序的顺序显示？如果这是真的，那我不知道如何提供帮助。
@Pointy 很复杂！即使我担任该职位，也会很复杂，然后保存和加载。已经有几个小时我试图找到一个好的解决方案。只是为了让你明白，我必须骑一个路线结构设计。
是的，我同意这听起来很复杂 :-) 这种特殊的编程不是我经常做的事情，所以我什至不知道从哪里开始！也许您必须从容器的左上角开始按位置“搜索”<img> 框？我不擅长那种事情。

标签： jquery jquery-ui drag-and-drop jquery-selectors

【解决方案1】：

感谢朋友“tentonaxe”[jQuery 论坛] 通过代码获取按其在文档中的位置排序的对象。然后，通过更多的实现，可以开发出屏幕所需的所有功能。

为了回答其他人的问题，将代码贴在这里。只记得我不是开发它的我。致谢Tentonaxe

   getImageOrder = function(){
        var $imgArr = $('img').sort(function(a,b){
                var keyA = $(a).offset().left;
                var keyB = $(b).offset().left;
                if (keyA > keyB){ return 1; }
                if (keyA < keyB){ return -1; }
                return 0;
            })

        var finalArray = new Array();
        $imgArr.each(function(index){
            finalArray[index] = { id  : $(this).attr("id"), src : $(this).attr("src"), pX  : $(this).css("left"), pY  : $(this).css("top") }
        })

        return finalArray;
    }

【讨论】：