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

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

0 голосов
/ 22 июня 2010

У меня проблема. У меня есть компонент 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>

1 Ответ

0 голосов
/ 23 июня 2010

Спасибо другу "tentonaxe" [jQuery forum] по коду, чтобы получить объекты, упорядоченные по их положению в документе.Затем, с помощью еще нескольких реализаций, можно разработать все функции, необходимые для экрана.

Для того, чтобы отвечать на вопросы других людей, будет размещен код здесь.Просто вспомни, что я не тот, кто его разработал.Кредиты Тентонакс 

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