web-dev-qa-db-fra.com

Jquery UI Draggable: aligner l’assistant sur la position de la souris

Avec jQuery, j'ai un élément déplaçable. C'est une div de 200 x 40. Bien entendu, l'utilisateur peut commencer à faire glisser cette div en cliquant sur différentes positions du div. Ce que je veux, c'est lorsque l'événement startdrag se produit, helper (clone) div sera toujours aligné sur le curseur de la même manière, quel que soit l'endroit où l'utilisateur a commencé à faire glisser le div. 

Ainsi, après la souris, les valeurs supérieure et gauche de l'aide doivent être identiques à celles des souris x et y. J'ai essayé ceci en utilisant ce code coffeescript:

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

    console.log( e )

Mais cela ne fonctionne pas et je suppose que cela se produit car les valeurs que je saisis sont directement écrasées par le plugin déplaçable en raison du mouvement de la souris.

Des idées?

javascriptjquerycoffeescriptdraggable
16
Tim Baas

Après avoir essayé la réponse d’Amar et réalisé qu’elle gâchait les interactions avec droppable, j’ai creusé plus profondément et découvert qu’il existe une option spécifique pour prendre en charge cette cursorAt.

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

Cela place le coin supérieur gauche de l’assistant 5 pixels au-dessus et à gauche du curseur et interagit correctement avec droppable.

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

Et donnons crédit si le crédit est dû. Merci, archives de la liste de diffusion jquery-ui!

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

37
Dan Burton

Essayez de mettre 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);
            }

Jetez un oeil à ceci jqFAQ.com , ce sera plus utile pour vous.

13
Amar

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

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