JQuery UI: Drop élément long à l'emplacement du curseur au lieu du milieu de l'élément

Question

J'ai quelques éléments très longs 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 au milieu de lui-même.

Malheureusement, le milieu de mon élément est souvent invisible et il n'est pas utile de déposer l'élément au bon endroit.

Est-il possible de spécifier la position du curseur pour choisir dans quel conteneur l'élément sera déposé au lieu du milieu des éléments?

Je suis vraiment coincé et j'apprécierai vraiment toute aide.

Salut, voici un exemple de code pour décrire mon problème. Le div jaune ne peut pas facilement tomber dans les cellules parce que c'est trop long. jsbin.com/upunek/edit

Merci

Answer 1

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

http://jsbin.com/upunek/2/edit

Answer 2

Comme mentionné par 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 (uniquement nécessaire si votre image originale est plus grand que le clone vous glisser)

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