私はjQueryとjavascriptが初めてです。
私は数値長方形に取り組んでいます。ユーザーが右側の灰色の矢印をクリックすると、四角形を任意の番号にドラッグできます。左矢印も同じです。
右矢印が左矢印と同じ位置にならないようにする機能があります。
ここまでは問題ありませんが、ユーザーは矢印を好きな場所に移動できます。ユーザーが矢印を移動すると、矢印が長方形の数字に最も近い場所になるようにしたいと思います。
マウスアップでイベントをトリガーすると、距離がわかりました。たとえそうであっても。たとえば、ユーザーが右矢印を移動して 7 と 8 の間に配置した場合、矢印を最も近い番号に移動する方法はありますか?
これは、左右の矢印の間の距離の結果を灰色の四角に入れたためです。
HTML:
<body>
<div class="modal">
<div style="position:fixed; width:100%; height:80px; background-color:#1a3751">
<span id="logo"></span><span class="titulo">Tira numérica</span>
</div>
<table width="100%" height="100%" style="width:100%; height:100%" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="middle" style="text-align:center; vertical-align:middle;">
<center>
<table cellpadding="0" cellspacing="0"><tr>
<td><button type="button" id="cmdMenos"><</button></td>
<td>
<div class="panel" style="">
<div id="contenedorLinea" style="white-space:nowrap; position:relative"></div>
<div id="regleta" style="">
<div id="flechaIzq"></div><div id="contador"><div id="lblContador"></div></div><div id="flechaDer"></div>
</div>
</div>
</td>
<td><button type="button" id="cmdMas">></button></td>
</tr></table>
</center>
</td></tr></table>
</div>
</div>
</body
Javascript:
var nMax = 100;
var nMin = 0;
var offset = 0;
function initLinea(){
$('#contenedorLinea').empty();
for (i=nMin; i<=nMax; i++)
{
if ( i % 2 == 0 )
var aux = $('<div class="num par" data-val="'+i+'">'+i+'</div>');
else
var aux = $('<div class="num non" data-val="'+i+'">'+i+'</div>');
$('#contenedorLinea').append( aux );
}
$('#regleta').width(5765);}
function updateOffset(){
$('.panel').scrollLeft( offset );
}
$(document).ready(function () {
$('#cmdMenos').click(function(){
offset -= 60;
updateOffset();
});
$('#cmdMas').click(function(){
offset += 60;
updateOffset();
});
var dragging = false;
var lastPosition;
var clicked;
$('#flechaDer').mousedown(function(e){
dragging = true;
lastPosition = e.pageX;
clicked=true;
});
$('#flechaIzq').mousedown(function(e){
dragging = true;
lastPosition = e.pageX;
clicked=false;
});
$(document).mouseup(function(e){
dragging = false;
});
$('#regleta').mouseup(function(e){
var contadorWidth = Math.floor(($('#contador').width()+17)/57);
$('#lblContador').html(contadorWidth);
});
$('#regleta').mousemove(function(e){
if(dragging == false) return;
var change= -(lastPosition-e.pageX);
lastPosition= e.pageX;
if (clicked == true) { //Si se da click a la flecha derecha
if( $('#contador').width() +change < 63 ){ //Si el ancho del contador +change es menor a 63 no se despliega nada
return false;
}
else{//De otro modo aumenta el ancho del contador
$('#contador').css({'width': '+='+change})
$(this).css({'width' : $(this).width() * 1.1});
}
}
if (clicked == false){//Si se da click a la flecha izquierda
if(e.pageX < 85){; //Si la posición x es menor a 85 no despliega nada
return false
}
else {
$('#flechaIzq').css({'margin-left':'+=' +change})// De otro modo aumenta el margen de la flecha izquierda
}
}
});
//window.captureEvents(Event.CLICK);
//window.onclick= displayCoords;
//function displayCoords(e) {
//
//}
$('div.panel').css('width', ($(document).width()-160)+'px');
initLinea();
$(".volver").on('click',function(){ document.location.href = '../'; });
});