2010-08-19 6 views
3

Je peux faire glisser des objets sans aucun problème, malheureusement, les éléments peuvent être traînés partout où je ne veux pas. Je veux seulement que les articles soient traînés sur certaines zones spécifiques telles que le menu bouton. J'ai utilisé plusieurs méthodes mais je n'ai aucun résultat. Pourriez-vous s'il vous plaît me dire comment désactiver un menu bouton qui a l'ID de 34 pour ne pas laisser tomber les boutons là-bas? Vous pouvez voir le code que j'utilise (ce qui ne fonctionne pas pour ne pas droppping)jQuery draggable/droppable probleme

Cordialement

Altaico

Voici le code:

$("#35").draggable(); 
$("myArticle").droppable("option", "disabled", true); 

Répondre

0

Jetez un oeil à la accept option pour votre élément droppable - ceci vous permet soit de spécifier quelles classes l'élément déplacé doit avoir avant qu'il ne soit considéré pour une opération de dépôt, ou une fonction que vous pouvez utiliser pour prendre cette décision en fonction d'autres critères.

+0

Je ne peux que faire glisser mes boutons mais je ne suis pas capable de les déposer n'importe où après avoir utilisé ce code. Je serai si heureux si vous pouvez m'aider à ce sujet. À votre santé. Altaico [code] $() prêt (function() { $ ("# technologyBtn") draggable ({revenir:... "Invalide"}); $ ("# de myArticle") largable (option » "," désactivé ", false); $ (" # techBtnMenu "). droppable (" option "," désactivé ", false); alert (" end "); }); [/ code] – alper

+0

Lorsque vous dites que vous ne pouvez pas le laisser tomber, quel comportement attendez-vous de voir quand vous relâchez le bouton de la souris? Je ne suis pas en mesure de laisser tomber mon bouton après que j'utilise votre code. – belugabob

2

Vous souhaitez définir le revert: option non valide sur l'objet draggable qui fait à revenir brusquement si elle tombe sur quoi que ce soit pas marqué comme largable, essayez donc:

$("#35").draggable({revert: "invalid"})); 
$("myArticle").droppable("option", "disabled", true); 
$("#36").droppable("option", "disabled", false); 

Cela signifie que vous feriez être capable de faire glisser 35 sur 36 mais pas sur myarticle.

est Ci-dessous le code html pleine page:

<head> 
    <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.8.4/jquery-ui.min.js"></script> 
</head>  
<body> 
    <script type="text/javascript"> 
    $().ready(function() { 
     $("#35").draggable({revert: "invalid"}); 
     $("#36").droppable({disabled: false }); 
    }); 
    </script> 
    <div id="34" style="width:100px; height:100px; background-color:red;"> 
    </div> 
    <div id="35" style="width:100px; height:100px; background-color:yellow;" > 
    </div> 
    <div id="36" style="width:300px; height:300px; border:solid blue 1px;"> 
    drop me here 
    </div> 
</body> 

Cela rend 2 blocs de couleur (le divs). Vous pouvez faire glisser le jaune (id 35) et déposez-le seulement dans la case "drop me here". Si vous voulez laisser tomber nulle part ailleurs, vous auriez à décorer cette zone avec largable

Hope this helps

+0

JonNeale Je suis capable de le faire glisser mais je ne peux pas le laisser tomber n'importe où. Je serai heureux si vous pouvez m'aider à ce sujet ... Je cherche votre aide. à votre santé. – alper

+0

J'ai corrigé un bogue dans la démo html listée ci-dessus, ce qui aurait provoqué le div draggable mais non droppable. Fondamentalement, il devait y avoir quelque chose dans le div. Pouvez-vous confirmer que la démo html, fait ce que vous voulez qu'il fasse? Jouer avec la démo, je peux ramasser div 35 et le laisser tomber seulement en div 36 – JonNeale

0

JonNeale

$("#35").draggable({revert: "invalid"}); 
$("#myArticle").droppable("option", "disabled", true); 
$("#54").droppable("option", "disabled", false); 

Cette fois, je ne suis pas en mesure de déposer 35. I bouton peut le faire glisser mais je ne peux pas le laisser tomber n'importe où tel que je voulais le déposer sur le menu bouton appelé 54. Comment je peux le laisser tomber seulement bouton menu 54?