拾取组件（Div）中图像的顺序（拖放jQuery）_Jquery_Jquery Ui_Drag And Drop_Jquery Selectors

拾取组件（Div）中图像的顺序（拖放jQuery）

jquery jquery-ui

拾取组件（Div）中图像的顺序（拖放jQuery）,jquery,jquery-ui,drag-and-drop,jquery-selectors,Jquery,Jquery Ui,Drag And Drop,Jquery Selectors,我有个问题。我有一个div组件，我将在其中拖动多个图像。这部分工作得很好。但我无法读取组件中播放的这些图像的顺序。发生了什么，我可以播放div组件图像中的任何位置，但是，我喜欢按从左到右的顺序阅读我相信这是可能的，但解决办法一定很复杂。他的一些朋友可以帮我在常规javascript中阅读这篇文章吗？或者知道任何可以帮助我的技巧谢谢页面代码：（全部代码）无标题文件 .draggable{ 宽度：90px；高度：80px；填充物：5px；浮动：左；利润率：0 10px 10px

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

我相信这是可能的，但解决办法一定很复杂。他的一些朋友可以帮我在常规javascript中阅读这篇文章吗？或者知道任何可以帮助我的技巧

谢谢

页面代码：（全部代码）


无标题文件
.draggable{
宽度：90px；
高度：80px；
填充物：5px；
浮动：左；
利润率：0 10px 10px 0；
字体大小：.9em；
}
.ui小部件标题p，.ui小部件内容p{
保证金：0；
}
.ui小部件标题已修改p{
颜色：#99CC99；
}
#快照目标{
高度：300px；
}
var-Cont=0；
addComponent=函数（strImg）{
如果（$.trim（strImg）！=“”）
{
Cont=Cont+1；
$（'#imgPrompt img'）。删除（）；
$（'#imgPrompt'）。前置（''）；
$（'#'+strImg+'_Img'+Cont）.draggable（{snap:true}）；
}
}
埃斯特鲁图拉·多卡米诺：

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

为了回答其他人的问题，我们将在这里发布代码。只是要记住，不是我发明的。学分

getImageOrder=function（）{
var$imgArr=$（'img'）.sort（函数（a，b）{
var keyA=$（a）.offset（）左；
var keyB=$（b）.offset（）.left；
如果（keyA>keyB）{return 1；}
if（keyA

我不确定我是否理解；您希望能够按照图像在DOM中的实际显示顺序迭代图像吗？这就是用jQuery查找元素时得到的顺序…@Pointy我想知道显示顺序。我认为这与文档（创建）的顺序不同。是否可能？是否“拖放”代码将它们与CSS定位一起排列，以便它们以不同于DOM顺序的顺序显示？如果这是真的，那我就不知道该怎么帮助了。@Pointy很复杂！即使我采取的立场，将是复杂的然后保存和加载。已经有几个小时了，我正试图找到一个好的解决办法。正如你所理解的，我开始进行路线结构设计。是的，我同意这听起来很复杂：-）那种特殊的编程不是我经常做的事情，所以我甚至不知道从哪里开始！也许您必须从容器的左上角开始按位置“搜索”

框？我不擅长那种事。

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

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