Выбор порядка изображений в компоненте (Div) (перетаскивание jQuery)

У меня проблема. У меня есть компонент div, где я перетаскиваю несколько изображений. Эта часть работает отлично. Но я не могу прочитать порядок этих изображений, воспроизводимых в компоненте. Что происходит, я могу играть любую позицию в образе компонента div, однако, как бы читать по порядку, как они есть, слева направо.Выбор порядка изображений в компоненте (Div) (перетаскивание jQuery)

Я считаю, что это возможно, но решение должно быть сложным. Некоторые из его друзей могут помочь мне в рутинном 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>

источник

2010-06-22 Paulo Henrique

Я не уверен, что понимаю; вы хотите, чтобы иметь возможность выполнять итерацию изображений в фактическом порядке, который они отображаются в DOM? Ну, это тот порядок, который вы получаете, когда вы просто находите элементы с jQuery ... – Pointy

@Pointy Я хотел бы знать порядок отображения. Я считаю, что это не то же самое, что порядок документа (создан). Возможно? –

Создает ли код «перетаскивание/перетаскивание» их с позиционированием CSS, чтобы они отображались в другом порядке, чем порядок DOM? Если это так, то я не знаю, как помочь. – Pointy

Благодарности к другу «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; 
    }

источник

2010-06-23 19:01:47

Выбор порядка изображений в компоненте (Div) (перетаскивание jQuery)

ответ

Смежные вопросы