jquery Draggable DIV avec curseur à l'intérieur

Question

J'ai passé quelques heures à essayer sur Google et je me suis essayé mais sans succès.

Ce que je fais est de créer un DIV et le rendre draggable. Et en ajoutant un curseur à l'intérieur pour faire pivoter l'image. Créer DIV et le rendre glissant et l'ajout de curseur est tout fait à la volée. Ce que je fais est en fait en cliquant sur un outil de la flèche et il clone l'outil de la flèche à l'intérieur d'un conteneur et en le faisant glisser et en ajoutant un curseur en même temps. Le résultat ressemblerait à ceci:

<div class='draggable'> 
    <img src='example.gif'> 
    <div class='slider'></div> 
</div> 

Le problème est que le curseur peut être déplacé à l'intérieur du DIV. Comment puis-je faire glisser DIV mais toujours avoir un curseur pour fonctionner normalement?

Nouvelle solution

Oui, je ne le découvrir et a décidé de faire une autre solution en utilisant la touche MAJ enfoncée pour faire la rotation. J'ai été en mesure d'utiliser la solution http://www.elated.com/articles/smooth-rotatable-images-css3-jquery/ et maintenant je peux simplement faire pivoter les images en utilisant la touche SHIFT tout en déplaçant la souris. Beaucoup plus simple que le curseur et fonctionne très bien!

Answer 1

En supposant que vous utilisez les composants glisser-déplacer de l'interface utilisateur jQuery, cela ne devrait pas poser de problème - les deux ne devraient pas entrer en conflit les uns avec les autres par défaut. Cependant, vous pouvez toujours exclure explicitement le curseur avec l'option cancel:

$('.draggable').draggable({ 
    cancel: '.slider' 
}); 

Voir cette jsFiddle un exemple simple: http://www.jsfiddle.net/yijiang/KMF2v/2

---

En supposant que vous n'êtes pas en utilisant jQuery UI. .. bien, dans ce cas, je vous suggère de sortir et de l'obtenir immédiatement, car écrire votre propre curseur et glisser-déposer-composant est un travail très dur.

encore, la solution évidente serait d'arrêter l'événement de bulles dans l'arbre DOM en utilisant stopPropagation()

$('.slider').click(function(event){ 
    event.stopPropagation(); 
});