Estoy buscando un camino a la unión de la snap evento.

Cuando estoy arrastrando un elemento más de mi superficie y el draggable elemento es acoplada para que se declare una posición de golpe quiero para desencadenar un evento.

Algo como esto:

$(".drag").draggable({
  snap: ".grid",
  snaped: function( event, ui ) {}
});

Punto de bonificación: con una referencia a la .grid elemento donde la draggable elemento fue acoplada.

OriginalEl autor fguillen | 2012-07-23

2 Comentarios

  1. 26

    La draggable widget de no exponer a un evento fuera de la caja (aún). Usted puede modificar y mantener su versión personalizada o, mejor, se derivan un nuevo widget de ella e implementar el nuevo evento. Hay, sin embargo, una tercera vía.

    De esta pregunta, sabemos que el widget se almacena una matriz de la potencialmente «snappable» elementos en su snapElements de la propiedad. A su vez, cada elemento de esta matriz se expone una snapping propiedad que es true si la posibilidad de arrastrar helper es actualmente acoplada a este elemento y false lo contrario (el ayudante puede ajustar a varios elementos al mismo tiempo).

    La snapElements matriz se actualiza para cada drag evento, por lo que siempre es de arriba-a-fecha en drag controladores. A partir de ahí, sólo tenemos que obtener la draggable instancia widget desde el elemento asociado con de datos(), y llame a su _trigger() método para plantear nuestra propia snapped evento (en realidad dragsnapped bajo el capó). De paso, podemos $.extender() la ui objeto con un objeto jQuery envolver el acoplada elemento:

    $(".drag").draggable({
        drag: function(event, ui) {
            var draggable = $(this).data("draggable");
            $.each(draggable.snapElements, function(index, element) {
                if (element.snapping) {
                    draggable._trigger("snapped", event, $.extend({}, ui, {
                        snapElement: $(element.item)
                    }));
                }
            });
        },
        snap: ".grid",
        snapped: function(event, ui) {
            //Do something with 'ui.snapElement'...
        }
    });

    El código anterior, sin embargo, todavía se puede mejorar. Tal y como está, un snapped evento se activa para cada drag evento (que se produce mucho) tan larga como la que se pueden arrastrar ayudante permanece acoplada a un elemento. Además, el evento se activa cuando el ajuste se acaba, lo que no es muy práctico, y aparta el convenio para este tipo de eventos a ocurrir en pares (snapped-in, snapped-out).

    Por suerte, la snapElements matriz es persistente, por lo que podemos usarlo para almacenar el estado. Podemos añadir un snappingKnown propiedad a cada elemento de la matriz en orden a la pista que ya tenemos activa una snapped evento para ese elemento. Por otra parte, se puede utilizar para detectar que un elemento ha sido acoplada a cabo desde la última llamada y reaccionar en consecuencia.

    Nota que en lugar de introducir otro snapped-out caso, el código de abajo elige para pasar un adicional de snapping de la propiedad (que refleja el elemento del estado actual) en el ui objeto (que es, por supuesto, sólo una cuestión de preferencia):

    $(".drag").draggable({
        drag: function(event, ui) {
            var draggable = $(this).data("draggable");
            $.each(draggable.snapElements, function(index, element) {
                ui = $.extend({}, ui, {
                    snapElement: $(element.item),
                    snapping: element.snapping
                });
                if (element.snapping) {
                    if (!element.snappingKnown) {
                        element.snappingKnown = true;
                        draggable._trigger("snapped", event, ui);
                    }
                } else if (element.snappingKnown) {
                    element.snappingKnown = false;
                    draggable._trigger("snapped", event, ui);
                }
            });
        },
        snap: ".grid",
        snapped: function(event, ui) {
            //Do something with 'ui.snapElement' and 'ui.snapping'...
            var snapper  = ui.snapElement.attr("id"),snapperPos = ui.snapElement.position(),
                snappee  = ui.helper.attr("id"),     snappeePos = ui.helper.position(),
                snapping = ui.snapping;
            //...
        }
    });

    Usted puede probar esta solución aquí.

    Para terminar, otra de las mejoras que puede ser hacer el snapped evento cancelable, como el drag evento. Para ello, tendríamos que volver false de nuestro drag controlador si una de las llamadas a _trigger() devuelve false. Es posible que desee pensar dos veces antes de la implementación de este, a pesar de que, como la cancelación de una operación de arrastre en snap-in o complemento de fuera no se ve como una muy característica fácil de usar, en el caso general.

    Actualización: De la interfaz de usuario jQuery 1.9 en adelante, el data() se convierte en el widget del nombre completo, con puntos reemplazados por guiones. En consecuencia, el código utilizado para obtener el widget ejemplo, se convierte en:

    var draggable = $(this).data("ui-draggable");

    Lugar de:

    var draggable = $(this).data("draggable");

    Utilizando el nombre no calificado es todavía apoyado en el punto 1.9, pero está en desuso, y el apoyo se redujo en 1.10.

    Precioso! 🙂 Me gusta..
    Estaría super amable y actualización de su acoplada con el id de la alineación y la acoplada a elemento(s) – yo uso 1.9.1 pero necesitan a saber, cuando el ajuste está en relación con el acoplada a los contenidos serán diferentes si es arriba, abajo, izquierda o derecha – pero ahora sólo he encontrado la alineación de objetos y su posición()
    si entiendo tu comentario correctamente, que la información ya está ahí. El «ajuste» elemento está disponible en ui.helper, y la «rompió» es el elemento ui.snapElement cuando ui.snapping es true.
    Aquí está el seguimiento – no hay compradores aún 🙁
    Cabe señalar que «$(this).de datos(«draggable»)» se ha cambiado a $(this).de datos(«ui-draggable») en las versiones más recientes…

    OriginalEl autor Frédéric Hamidi

  2. 1

    En jquery-ui 1.10.0, el código anterior no funciona. La función de arrastre está en su lugar:

    drag: function(event, ui) {
      var draggable = $(this).data("ui-draggable")
      $.each(draggable.snapElements, function(index, element) {
        if(element.snapping) {
          draggable._trigger("snapped", event, $.extend({}, ui, {
            snapElement: $(element.item)
          }));
        }
      });
    }
    Entiendo que mi respuesta es un poco larga, pero lo que no intente leerlo en su totalidad? 🙂
    La diferencia es que $(this).de datos (se puede «arrastrar») no existe en 1.10+. Debe utilizar ‘de la interfaz de usuario que se pueden arrastrar’ en su lugar. En lugar de colocar todo el conjunto de código que realmente debería haber dicho eso.

    OriginalEl autor user2059224

Dejar respuesta

Please enter your comment!
Please enter your name here