arrastrar y soltar en un control deslizante jquery: publicar la posición en el servidor

Estoy tratando de implementar arrastrar un elemento a un control deslizante jquery. Por ejemplo, si el elemento se coloca en el 86 % del control deslizante, me gustaría PUBLICAR esta posición en el servidor para que el elemento pueda colocarse en el 86 % a lo largo del conjunto de resultados en el servidor.

¿Cómo detecta la caída en un control deslizante de jQuery y el porcentaje enviado al servidor?

preguntado el 08 de marzo de 13 a las 21:03

Que quieres decir con item y slider? -

2 Respuestas

Como no soy tan bueno explicando cosas, hice un jsFiddle para ti. Aunque esto podría no ser exactamente lo que buscas, ¡debería ser un buen punto de partida!

Aquí está el código:

    $(function () {

    //the draggable object
    $("#dragobject").draggable();

    //Prepare the slider
    var range = 100,
        sliderDiv = $("#slider");

    // Activate the UI slider
    sliderDiv.slider({
        min: 0,
        max: range,
        create : function(){
            $(this).find(".ui-slider-handle").hide();
        }
    });

    // Number of tick marks on slider
    var position = sliderDiv.position(),
        sliderWidth = sliderDiv.width(),
        minX = position.left,
        maxX = minX + sliderWidth,
        tickSize = sliderWidth / range;

    //Set slider as droppable
    sliderDiv.droppable({
        //on drop 
        drop: function (e, ui) {

            var finalMidPosition = $(ui.draggable).position().left + Math.round($("#dragobject").width() / 2);

            //If within the slider's width, follow it along
            if (finalMidPosition >= minX && finalMidPosition <= maxX) {

                var val = Math.round((finalMidPosition - minX) / tickSize);
                sliderDiv.slider("value", val);
                alert(val + "%");

                //do ajax update here to set the position
                /*$.ajax({
                    type: "POST",
                    url: url,
                    data: val,
                    success: function () {
                        //congrats
                    },
                    dataType: dataType
                });*/

            }
        }
    });

});

Y aquí está el enlace jsFiddle: ejemplo de jsFiddle

Espero eso ayude,

Bagazo.

FUENTES: Control deslizante de jquery que se desliza mientras se mueve el mouse, Control deslizante de la interfaz de usuario de jQuery

contestado el 23 de mayo de 17 a las 12:05

¡Eso hace el truco! Gracias ;-) ¿Sabes si hay alguna forma de evitar que el mango salte al punto de caída? - user2145475

Sí, simplemente podría hacerlo usando « $(this).find(".ui-slider-handle").hide(); » que apuntan al control deslizante y lo ocultan. ¡Vea mi jsFiddle actualizado y responda! ¡Buena suerte! - marky

Dado que está utilizando jQuery, supongamos que está utilizando jQuery UI para arrastrar y soltar. Primero lee esto: http://api.jqueryui.com/droppable/#event-drop

Luego, date cuenta de que obtienes la posición de desplazamiento del elemento soltado en relación con el contenedor que se puede soltar como parte del evento. Aquí sería donde podría calcular eso en porcentaje si lo necesita.

Por ejemplo, colocarlo en la posición izquierda -> 90 px de un contenedor que sabe que tiene 100 px de ancho significa que el 90 % es su número mágico.

O si está utilizando arrastrar y soltar de forma nativa, consulte esta sencilla edición: http://jsbin.com/ezuke/3283/edit . Si abre un registro de consola en el evento en el evento de soltar, verá que también expone el desplazamiento de donde lo soltó y podría consumirlo nuevamente en su cálculo de %.

respondido 08 mar '13, 22:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.