2
J'ai deux listes pouvant être triées qui sont connectées. L'un est simplement sur la page, l'autre est dans un accordéon. (J'utilise l'accordéon comme un conteneur pour l'autre liste)Interface utilisateur jQuery: faites glisser Sortable de l'intérieur de l'accordéon vers l'extérieur
Mon but est tel qu'un utilisateur peut ouvrir l'accordéon et tirer des éléments de cette liste et sur la page.
Cela fonctionne - sauf que l'espace réservé disparaît à la sortie de l'accordéon. J'ai essayé helper: 'clone' et augmentant le zIndex.
Voici une version simplifiée du code:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#inside").accordion({
collapsible: true,
fillSpace: true,
active: false
});
$("#ulOutsideList, #ulInsideList").sortable({
opacity: 0.7,
revert: 100,
scroll: true,
helper: 'clone',
zIndex: 50000,
connectWith: ".connectedSortable",
});
});
</script>
<div id="outside"> <!-- 1. Pick a Store -->
<ul id="ulOutsideList" class="connectedSortable">
<li>outside 1</li>
<li>outside 2</li>
<li>outside 3</li>
</ul>
</div> <!-- end 1. Pick a Store -->
<div style="clear:both"></div>
<div id="inside">
<h3>container</h3>
<ul id="ulInsideList" class="connectedSortable">
<li>inside 1</li>
<li>inside 2</li>
<li>inside 3</li>
</ul>
</div>
Vous voulez donc faire glisser des éléments hors de l'accordéon et laisser des espaces réservés vides à leur place? –