Jquery UI Draggable: Aligner l'assistant sur la position de la souris

Avec jQuery, j'ai un élément déplaçable. C'est un div avec une taille de 200 x 40.
Bien sûr, l'utilisateur peut commencer à faire glisser cette div en cliquant sur variuos positions dans le div.
Ce que je veux, c'est lorsque la méthode startdrag événement se produit, l'assistant (clone) div sera toujours aligné sur le curseur de la même façon, peu importe où dans le div de l'utilisateur a commencé à glisser.

Donc après les événements mousedown l'aide du haut et de gauche, les valeurs doivent être les mêmes que les souris en x et y de. J'ai essayé à l'aide de cette coffeescript code:

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

    console.log( e )

Mais il ne fonctionne pas et je suppose que cela se passe parce que les valeurs que j'ai mis dans sont directement remplacés par les déplaçable plugin en raison de mouvement de la souris..

Des idées?

source d'informationauteur Tim Baas

  1. 37

    Après avoir essayé Amar réponse et de réaliser que c'vis des interactions avec droppablej'ai creusé plus profondément, et a constaté que il ya une option pour répondre spécifiquement à ce qui est appelé cursorAt.

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

    Cette place le coin en haut à gauche de l'assistant de 5 pixels en haut et à gauche du curseur, et interagit correctement avec droppable.

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

    Et nous allons donner du crédit lorsque le crédit est dû. Merci, jquery-ui archives des listes de diffusion!

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

  2. 13

    Essayez de vous fixer comme ça,

           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);
            }

    Prendre un coup d'oeil à ce jqFAQ.com , il sera plus utile pour vous.

  3. 0

    J'ai trouvé un correctif pour cela et c'est très facile, si vous utilisez le triable plugin, vous pouvez fixer le helper position comme ceci:

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

    Cela a fonctionné pour moi:

    appendTo: 'body'

    Comme suit:

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