jquery triable ne peut pas être déplacé en dehors de l'accordéon

J'ai 2 listes triables connectées. On est à l'intérieur d'un accordéon. Lorsque j'essaie de faire glisser des éléments du sortable dans l'accordéon, l'assistant disparaît dès que je sors de l'accordéon. Je peux passer à l'un des autres sortables connectés et l'élément s'affichera, mais il ne s'affichera pas pendant que je fais glisser. L'accordéon défile aussi vers le bas si je glisse et élimine l'objet.jquery triable ne peut pas être déplacé en dehors de l'accordéon

Je peux faire glisser & déposer des éléments de l'autre liste où j'ai besoin et ça fonctionne bien. Comment puis-je faire disparaître les objets en les faisant glisser de l'intérieur d'un accordéon à l'extérieur de celui-ci?

J'ai déjà essayé l'option de confinement mais cela semble n'avoir aucun effet.

Code est ici pour exposer le problème que j'ai pris de ces exemples: http://jqueryui.com/demos/sortable/#connect-lists

Je veux être en mesure de faire glisser des éléments de l'accordéon dans la liste sortable. Je peux les déposer dans la liste, mais ils disparaissent pendant que je les traîne en dehors de l'accordéon.

<html> 
<head> 

<title>Accordion Sortable Failure Test</title> 
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet"/> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $(".sortable").sortable({connectWith: ".sortable"}); 
    $("#accordion").accordion({ header: "h3" }); 
}); 
</script> 

</head> 

<body> 

<h2>Sortable</h2> 
<ul class="sortable"> 
    <li>Row 1</li> 
    <li>Row 2</li> 
</ul> 

<h2>Accordion</h2> 
<div id="accordion"> 
    <div> 
     <h3><a href="#">First</a></h3> 
     <ul class="sortable"> 
      <li>Lorem</li> 
      <li>ipsum</li> 
      <li>dolor</li> 
     </ul> 
    </div> 
    <div> 
     <h3><a href="#">Second</a></h3> 
     <div>Phasellus mattis tincidunt nibh.</div> 
    </div> 
    <div> 
     <h3><a href="#">Third</a></h3> 
     <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
</div> 

</body> 
</html>

Source

2010-01-11 Matthew

coller un échantillon de votre code afin que nous sachions ce que vous avez oublié ... il semble que pendant que vous êtes sur la souris vers le bas ... alors votre accordéon déclenche un événement ... Je peux me tromper, mais ça sonne ... alors essayez et jetez un oeil à la propagation et stopPropagation sur jquery.

Source

2010-01-11 12:24:46 Val

I ajouté le code source. Pouvez-vous suggérer ou identifier comment identifier l'événement sur lequel l'élément a pu avoir arrêté la propagation? – Matthew

s'il vous plaît regardez ceci: http://jqueryui.com/demos/accordion/#sortable devrait aider avec votre chose si vous voulez que l'accordéon soit triable lui-même. D'autre part, sur l'interface utilisateur triable, vous devriez jeter un coup d'œil à l'assistant. par exemple. 'helper: 'clone'' donc ajoutez le suivant ' $ (". sortable"). sortable ({connectWith: ".sortable", helper:' clone '}); 'ceci montrera un clone de l'élément que vous êtes faire glisser tout en tirant est tiré puis, une fois terminé, détruit le clone, conserve l'original sur la cible – Val

Je suis un peu en retard, je sais, mais j'ai eu un problème similaire avec deux accordéons triables où vous pouvez faire glisser & déposer des objets entre les deux accordéons.

Ainsi, pour référence future:

Je ne pouvais pas obtenir aussi l'accordéon-éléments à « sortir » de la source accordéon, et Google m'a amené à cette question.

Je résolu mon problème en ajoutant axe: non défini la fonction sortable():

 $("#accordion1") 
     .accordion({ 
      collapsible: true, 
      header: "> div > h3", 
      dropOnEmpty: true, 
      autoHeight: false, 
      active: false 
     }) 
     .sortable({ 
      axis: "y", 
      handle: "h3", 
      stop: function() { 
       stop1 = true; 
      }, 
      connectWith: '.connectedSortable', 
      helper: 'clone', 
      axis: undefined 
     });

Maintenant, l'accordéon-éléments peuvent être glissés dans tous les sens.

Source

2010-10-21 14:20:59

Your.La fonction sortable a 'axis:" y "' au début et 'axis: undefined' à la fin. Êtes-vous sûr que c'est correct? – hamid

Dans votre appel triables vous souhaitez utiliser les options suivantes:

helper: "clone", appendTo: "body", // or whatever element you want the helper clone to be attached to

Cela fait deux choses. D'abord, il fait glisser une copie de l'élément (option helper), ensuite il associe cette aide à l'élément spécifié (option appendTo).

question similaire ici: jQuery-Ui: Cannot drag object outside of an accordion

Source

2011-07-08 14:57:43 Edyn

jquery triable ne peut pas être déplacé en dehors de l'accordéon

Répondre

Questions connexes