Très simple jquery ui glisser-déposer ne pas tomber

WHY ne fait pas tomber la boîte de drag?Très simple jquery ui glisser-déposer ne pas tomber

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
#content { 
    background:#CCCCCC; 
    width:500px; 
    height:500px; 
} 
#drop { 
    height:200px; 
    width:200px; 
    background:#00FFFF; 
    float:right; 
} 
#drag { 
    background:#009966; 
    width:100px; 
    height:100px; 
    float:left; 
} 
.active { 
    background:#FFCC33; 
} 

</style> 
<script type="text/ecmascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#drag').draggable({ 
      containment: '#content', 
      scrollSensitivity: 60, 
      revert: true, 
      cursor: 'move' 
     }); 

     $('#drop').droppable({ 
      accept: '#drag', 
      drop: function(event, ui) { 
       $(this).addClass('.active'); 
      } 
     }); 

    }); 
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 


<body> 

    <div id="content"> 
     <div id="drag"> 

     </div> 
     <div id="drop"> 

     </div> 

    </div> 

</body> 
</html>

Source

2010-03-12 Catfish

Il ne tombe pas parce que j'ai besoin de changer le retour à 'invalide' au lieu de vrai. – Catfish

Vous avez 3 problèmes se produisant.

Les javascript incluent pour jQuery devrait être javascript au lieu de ecmascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

La classe .active ne remplacera pas #drag (parce qu'il est moins spécifique), vous devez modifier le CSS:

#drop.active { background:#FFCC33; }

Et dans jQuery ne pas utiliser le . lors de l'utilisation de la méthode addClass(), il suffit d'utiliser le nom de classe:

$(this).addClass('active');

Voici votre source de ces changements, ce qui devrait avoir l'effet escompté:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
#content { 
    background:#CCCCCC; 
    width:500px; 
    height:500px; 
} 
#drop { 
    height:200px; 
    width:200px; 
    background:#00FFFF; 
    float:right; 
} 
#drag { 
    background:#009966; 
    width:100px; 
    height:100px; 
    float:left; 
} 
#drop.active { background:#FFCC33; } 

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#drag').draggable({ 
      containment: '#content', 
      scrollSensitivity: 60, 
      revert: true, 
      cursor: 'move' 
     }); 

     $('#drop').droppable({ 
      accept: '#drag', 
      drop: function(event, ui) { 
       $(this).addClass('active'); 
      } 
     }); 

    }); 
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 


<body> 

    <div id="content"> 
     <div id="drag"> 

     </div> 
     <div id="drop"> 

     </div> 

    </div> 

</body> 
</html>

Source

2010-03-12 03:07:09

Même si ce n'est pas ce que je voulais obtenir, merci d'avoir signalé ces erreurs. Cela m'a aidé à résoudre une partie de mon problème – Catfish

draggable fait le contenu de votre sélecteur draggable, pas le sélecteur lui-même. Vos divs sont vides. Ajoutez quelque chose là-dedans et ces éléments deviendront traçables. PS: Vous devriez être un peu plus verbeux dans votre question. Ne dites pas "Pourquoi ça ne marche pas?". Demandez pourquoi certaines choses ne fonctionnent pas.

Source

2010-03-12 03:03:26 psychotik

Bon point. Ça traîne, mais ça ne tombe pas. – Catfish

Il fonctionne. Si vous vous demandez pourquoi cela ne change pas la couleur, c'est parce que les styles définis pour #droppable ont la priorité sur active alors la couleur ne changera pas. Ajoutez une règle !important pour la couleur d'arrière-plan dans active et cela devrait fonctionner.

Source

2010-03-12 03:08:11

Très simple jquery ui glisser-déposer ne pas tomber

Répondre

Questions connexes