JQuery UI: déposez l'élément long à l'emplacement du curseur au lieu du milieu de l'élément
J'ai de très longs éléments déplaçables que je peux déposer dans toutes les cellules d'une table d'arrière-plan.
Lorsque je commence à faire glisser ce type d'élément sur mes conteneurs droppables (les cellules de ma table), le point "chaud" pour savoir où l'élément sera déposé est le milieu de lui-même.
Malheureusement, le milieu de mon élément n'est souvent pas visible et il n'est pas utile de laisser tomber l'élément au bon endroit.
Est-il possible de spécifier la position du curseur à choisir quel conteneur l'élément sera déposé à la place du milieu des éléments?
Je suis vraiment coincé et j'apprécierai vraiment toute aide.
Salut, voici un exemple de code pour représenter mon problème. Le div Jaune ne peut pas facilement tomber dans les cellules car il est trop long. jsbin.com/upunek/edit
Merci
2 réponses
Je pense que ce que vous cherchez est tolerance. Je suggérerais probablement d'utiliser "pointer" car cela utilisera le curseur de la souris comme point de "chevauchement".
Http://jqueryui.com/demos/droppable/
$('[id^="cell-"]').each(function(index) {
$(this).droppable({
accept: ".cartridge",
hoverClass: "cell-highlght",
tolerance: "pointer",
drop: function( event, ui ) {
$( this ).addClass( "cell-dropped" );
}
});
});
Comme l'a mentionné James Montagne, la tolérance est ce dont vous avez besoin pour cela. En plus de cela, pour droppable, vous pouvez utiliser cursorAt. Cela vous aide à définir l'image par rapport au curseur (seulement nécessaire si votre image d'origine est plus grande que le clone que vous faites glisser)