jquery-ui - eventos - evento drop jquery

¿Cómo invocar mediante programación jQuery UI Draggable drag start?

Question

Creo un nuevo elemento jQuery cuando el mouse está en una posición hacia abajo y antes de soltarlo. (Despues de mousedown).

Me gustaría activar mediante programación el dragging del nuevo elemento mediante jQuery UI, para que comience a arrastrar automáticamente con el movimiento de mi mouse. No quiero tener que liberar y luego hacer clic en el mouse nuevamente.

He probado lo siguiente...

var element = $("<div />");
element.appendTo("body").draggable().trigger("mousedown");

... Sin embargo, esto no funciona.

¿Alguien tiene alguna sugerencia sobre cómo lograr esto?

ACTUALIZACIÓN: Después de algunas búsquedas, el póster de esta pregunta tiene el mismo problema. Sin embargo, la solución sugerida, que se reduce a ...

$("body").on("mousedown", function(e) { 
  $("<div />").draggable().appendTo("body").trigger(e);
});

... ya no funciona en las últimas versiones jQuery y jQuery-UI, y en su lugar genera un error de Máximo de Apilamiento de Llamadas Superado.

Answer 1

Crea tu función arrastrable con el mouseover

$(''#futureDragableElement'').mouseover(function() {
  $(this).draggable();
});

Como la inicialización que se puede arrastrar ya se ha hecho, se tendrá en cuenta el primer clic del mouse.

Answer 2

El complemento que se puede arrastrar espera que los eventos de su ratón usen su espacio de nombres y apunten al objeto que se puede arrastrar como destino. La modificación de estos campos en el evento funciona con jQuery 1.8.3 y jQuery UI 1.9.2.

$("body").on("mousedown", function(e) { 
  var div = $("<div />").draggable().appendTo("body");
  e.type = "mousedown.draggable";
  e.target = div[0];
  div.trigger(e);
});

Demostración aquí: http://jsfiddle.net/maCmB/1/

Answer 3

Esto es totalmente un hack, pero parece hacer el truco:

  var myDraggable = $(''#mydraggable'').draggable();

  // Yeah... we''re going to hack the widget
  var widget = myDraggable.data(''ui-draggable'');
  var clickEvent = null;

  myDraggable.click(function(event){
      if(!clickEvent){
        widget._mouseStart(event);
        clickEvent = event;
      }
      else {
        widget._mouseUp(event);
        clickEvent = null;
      }
    });

  $(document).mousemove(function(event){
    console.log(event);
    if(clickEvent){
      // We need to set this to our own clickEvent, otherwise
      // it won''t position correctly.
      widget._mouseDownEvent = clickEvent;
      widget._mouseMove(event);
    }
  });

Aquí está el plunker

Mi ejemplo utiliza un elemento que ya existe en lugar de crear uno, pero debería funcionar de manera similar.

Answer 4

Los hacks no son necesarios si está creando el elemento durante el evento y ese elemento no es demasiado complicado. Simplemente puede establecer arrastrar al elemento que se produce el movimiento del ratón y usar la propiedad del ayudante que se puede arrastrar para crear un ayudante que será su nuevo elemento. En dragStop, clone el ayudante en la ubicación en el dominio que desee.

$(''body'').draggable({
  helper: function() {
    return ''<div>your newly created element being dragged</div>'';
  },
  stop: function (e,ui) {
    ui.helper.clone().appendTo(''body'');
  }
});

Por supuesto, necesitarías establecer la posición para el ayudante, así que el mouse está en él. Este es solo un ejemplo muy básico.

Answer 5

Tiene que vincular el evento mousedown al elemento en cuestión, luego puede desencadenar el evento.

Desde http://api.jquery.com/trigger/

Todos los controladores de eventos adjuntos con .bind () o uno de sus métodos de acceso directo se activan cuando se produce el evento correspondiente. Sin embargo, se pueden disparar manualmente con el método .trigger (). Una llamada a .trigger () ejecuta los manejadores en el mismo orden en el que estarían si el evento los activara de forma natural:

$(''#foo'').bind(''click'', function() {
      alert($(this).text());
    });
    $(''#foo'').trigger(''click'');