javascript - coffie - Jquery UI Draggable: alinear el ayudante con la posición del mouse

js to coff

Question

Con jQuery tengo un elemento que se puede arrastrar. Es un div con un tamaño de 200 x 40. Por supuesto, el usuario puede comenzar a arrastrar este div haciendo clic en varias posiciones en el div. Lo que quiero es que cuando ocurra el evento startdrag, el div ayudante (clon) siempre se alineará con el cursor de la misma manera, sin importar en qué lugar del div, el usuario comenzó a arrastrar.

Así que después de la reducción del ratón, los valores superior e izquierdo del ayudante deben ser los mismos que los ratones x e y. He intentado esto usando este código de coffeescript:

onStartDrag: ( e, ui ) =>
    ui.helper.css
        left: e.clientX
        top: e.clientY

    console.log( e )

Pero no funciona y mi conjetura es que esto está sucediendo porque los valores que puse están sobrescritos directamente por el complemento que se puede arrastrar debido al movimiento del mouse ...

¿Algunas ideas?

Answer 1

Después de probar la respuesta de Amar y darme cuenta de que cura las interacciones con droppable , profundicé más y encontré que hay una opción específicamente para admitir esto llamado cursorAt .

$(''blah'').draggable
  helper: ->
    ... custom helper ...
  cursorAt:
    top: 5
    left: 5

Esto coloca la esquina superior izquierda del helper 5 píxeles arriba y a la izquierda del cursor, e interactúa correctamente con droppable .

http://api.jqueryui.com/draggable/#option-cursorAt

Y vamos a dar crédito donde se debe el crédito. Gracias, archivos de lista de correo jquery-ui!

https://groups.google.com/forum/#!topic/jquery-ui/Evb94G_QvNw

Answer 2

Esto hizo el truco para mí:

appendTo: ''cuerpo''

Al igual que:

$(this).draggable({
    helper: "clone",
    cursor: "move",
    appendTo: ''body''
});

Answer 3

Estoy de acuerdo con @roverv.

Esto funciona bien conmigo.

$(''.js-tire'').draggable
      tolerance: ''fit'',
      appendTo: ''body'',
      cursor: ''move'',
      cursorAt:
        top: 15,
        left: 18
      helper: (event) ->
        $(''<div class="tire-icon"></div>'').append($(''<img src="/images/tyre_32_32.png" />''))
      start: (event, ui) ->
        if $(event.target).hasClass ''in-use''
          $(''.js-send-to-maintenance-box'').addClass ''is-highlighted''
        else
          $(''.ui-droppable'').addClass ''is-highlighted''
      stop: (event, ui) ->
        $(''.ui-droppable'')
          .removeClass ''is-highlighted''
          .removeClass ''is-dragover''

Answer 4

He encontrado una solución para esto y es muy fácil, si está utilizando el complemento clasificable, puede corregir la posición de ayudante de esta manera:

sort: function(e, ui) {
    $(".ui-sortable-handle.ui-sortable-helper").css({''top'':e.pageY});
}

Answer 5

Intenta configurar de esta manera,

       start: function (event, ui) {
                $(ui.helper).css("margin-left", event.clientX - $(event.target).offset().left);
                $(ui.helper).css("margin-top", event.clientY - $(event.target).offset().top);
            }

Eche un vistazo a este jqFAQ.com , será más útil para usted.