7
votes

Commutateur curseur pour montrer où je peux laisser tomber un élément

J'ai une question / tâche tellement évidente que je me demande toujours pourquoi je ne pouvais pas trouver une solution pour ça ...

dans une application JavaScript qui utilise jQuery ui, j'utilise le draggable () et dressable () API pour pouvoir déplacer des éléments. Cela fonctionne directement en avant et comme prévu. Mais maintenant, je veux changer le curseur de la souris de manière à ce que cela montre où je peux déposer un élément ( curseur: "copier" ) ou où ce n'est pas possible ( curseur: "Non- Drop ").

Cela devrait - bien sûr - ne se produit que lors du glissement, sinon le curseur normal doit être affiché.

Remarque: on peut supposer qu'une chute est autorisée uniquement dans un

  (par exemple, identifié par un  ID  ou  Classe  ) Et partout ailleurs une goutte n'est pas autorisée.


                        
                        
                            
                                                                    javascript
                                                                    jquery
                                                                    html
                                                                    jquery-ui
                                                            
                        
                                                    
                            
                            
                                1 commentaires
                                
                                                                            Jouer un peu dans le  Fiddle ;)



                                    
                    4 Réponses :
                    
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Donnez à la liste Dropzone une classe ( Dropzone ) et lorsque vous commencez à faire glisser Ajouter une classe à l'élément corporel ( glisserferfect ) via JavaScript. 

 Une fois que vous avez chuté, supprimez à nouveau cette classe de la classe. 

 Ajoutez une règle CSS  corbin.Dropzone {curseur: URL (peu importe); }                                  


                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            

                        

                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Changez le curseur tout en faisant glisser 
$( ".selector" ).droppable({ hoverClass: "drop-hover" });

                                

                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Mais comment cela fonctionnera-t-il? Le  HoverClass  est ajouté à la liste recontractable située en dessous de la gluge qui masque tout  curseur  style défini. Avez-vous un violon qui fonctionne?                                                

                                                
                                                                                    

                                    

                                                            

                        

                        
                                            
                            
                                
                                    4
 votes
                                
                            
                            
                                
                                     Vous pouvez définir le style de curseur de la draggable sur  non-goutte  code> tout en faisant glisser à l'aide de  Démarrer  Rappel de l'événement à l'aide de   CSS ()  code>  Méthode, et modifiez-le à  Copier  CODE> Quand il se trouve sur une récupération dressable dans   sur  code>  rappel d'événement. 
 Une fois que les feuilles glagibles sont récupérées, vous pouvez revenir le curseur sur  sans goutte  code> dans le   out  code>  rappel d'événement et définissez le réinitialiser dans le curseur par défaut lors du glisser des arrêts en réglant le réglage CSS  curseur  code> Valeur de la propriété sur  Initial  code> dans le  Arrêtez  Rappel de l'événement de draggable comme indiqué ci-dessous:  p> 
  p> 


<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="draggable">
  <span>Drag</span>
</div>

<div id="droppable">
  <span>Drop here</span>
</div>

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    4
 votes
                                
                            
                            
                                
                                     OK, merci beaucoup! Toutes vos réponses m'étaient très utiles et m'ont inspiré à une solution qui travaille pour moi:  http://jsfiddle.net/qck9kf17/ < / a> 
 Le "truc" est fondamentalement:   xxx                                  


                                                                    
                                    
                                    
                                        0 commentaires