0

我是 jQuery 和 javascript 的新手。

我正在研究一个数字矩形。当用户单击右侧的灰色箭头时，他们可以将矩形拖动到任意数字。左箭头也一样。

我有一个功能，使右箭头永远不能与左箭头在同一位置。

到目前为止，这很好，但用户可以将箭头移动到他们想要的任何地方。我希望这样，如果用户移动箭头，箭头会在矩形上最接近数字的位置。

我在 mouseup 上触发事件，现在我有距离了。即使是这样。例如，如果用户移动右箭头并将其放在 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&eacute;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 = '../'; });
 });

JS Fiddle 中的演示已更新

4

0 回答 0