拾取组件中图像的顺序(Div) (拖放jQuery)
拾取组件中图像的顺序(Div) (拖放jQuery)
提问于 2010-06-22 20:25:35
我有个问题。我有一个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
Stack Overflow用户
回答已采纳
发布于 2010-06-24 03:01:48
感谢朋友"tentonaxe“jQuery论坛通过代码来获得按其在文档中的位置排序的对象。然后，通过更多的实现，可以开发屏幕所需的所有功能。
为了回答其他人的问题，我将在这里发布代码。只要记住我不是开发它的人。Credits 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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3093020
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号