Réglage des limites d'un objet déplaçable
J'ai deux éléments:
1. Un parent de hauteur fixe, overflow:hidden
2. Son enfant, de plus grande hauteur fixe.
<style type="text/css">
.myList {list-style:none; margin:0px; padding:1px;}
.myList li{ height:50px; margin:4px; padding:2px;}
.dragPanel {height:230px; border:solid; overflow:hidden;}
</style>
<div class="dragPanel">
<ul class="myList">
<li>1</li>
<li>2</li>
... ....
<li>8</li>
<li>9</li>
</ul>
</div>
Je veux être en mesure de faire glisser la liste vers le haut et vers le bas à l'intérieur de la div parent. Je suis à l'aide de l'interface utilisateur de jquery déplaçable plugin pour atteindre verticle de glisser, mais je suis pas sûr de la façon de limiter la liste à l'intérieur de la div parent.
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.dragPanel').addClass("hover");
$('.myList').draggable({ axis: 'y' });
});
</script>
Comment pourrais-je aller sur la configuration de verticle limites supérieure et inférieure pour la posistion de la liste?
OriginalL'auteur Paul | 2009-10-10
Vous devez vous connecter pour publier un commentaire.
Utiliser le confinement option:
Ce était génial. facile
OriginalL'auteur moff
J'ai eu les mêmes problèmes et les réponses ne m'a pas aidé. Un peu de javascript plus tard, je pense que ce qui suit est une meilleure solution.
(Quelqu'un sait comment en faire un plugin jQuery?)
OriginalL'auteur Lode
Ok,
Ici est la route que j'ai descendu...
Lorsque la page est chargée, j'ai ajouter un div conteneur autour de la déplaçable liste. Je l'ai mis en hauteur le double de celle de la liste, puis positionnez la page un peu:
La liste est alors contenue à ce nouvel élément.
Cela semble faire le travail, mais le positionnement est tous un peu shakey si la liste a de tout remplissage /marge appliquée. Toute réflexion sur qui serait appreicated!
------ Modifier ---------
Ok, je pense avoir résolu le problème de placement. Je l'ai détourné dans un plugin afin que d'autres personnes n'ont pas à passer du temps à la création de cette fonctionnalité.
jQuery Drag-pignon Liste sur Github
OriginalL'auteur Paul
Vous n'avez pas à glisser quoi que ce soit pour ce genre de structure. Ce que vous avez besoin est de mettre en place le div parent avec overflow-x:hidden; overflow-y:scroll;. De cette façon, son contenu sera déplacé.
Si vous souhaitez masquer la barre de défilement, il suffit de mettre cette propriété: .dragPanel::-webkit-scrollbar{width:0 !important} et c'est tout! Je ne sais vraiment pas pourquoi vous pensez en faisant glisser des éléments au lieu de défiler le contenu (qui est la bonne façon de mener à bien ce genre de "problèmes"). De toute façon, j'espère que cela aide quelqu'un qui a besoin de s'adapter à la même necesity. Salutations!
OriginalL'auteur Criss