J'ai deux éléments:
Je veux pouvoir faire glisser la liste de haut en bas dans le parent div. J'utilise le plugin druggage de l'UI JQuery pour atteindre Vertid Dragging, mais je ne suis pas sûr de contraindre la liste dans le parent div. Comment puis-je continuer à définir la tige de verticule et des limites inférieures pour la postitude de la liste? Overflow: caché
4 Réponses :
Le parent est de plus petit hieght que son enfant - lorsque j'essaie cette option, le glisser ne fonctionne pas - la liste des sauts entre les positions supérieure et inférieure
C'était génial. facile
OK,
Voici l'itinéraire que je suis allé ...
Lorsque la page est chargée, j'ajoute un conteneur div autour de la liste déroulante. J'ai défini la hauteur à deux fois celle de la liste, puis positionner la page un peu: la liste est ensuite contenue dans ce nouvel élément. < P> Ceci semble faire le travail, mais le positionnement est tout un peu shambre si la liste a été appliquée à tout rembourrage / marge appliquée. Toutes les pensées sur ce serait appréciée! ------ Modifier --------- OK, je pense avoir résolu le problème de placement. J'ai transformé cela dans un plugin afin que d'autres personnes n'ont pas à passer du temps à créer cette fonctionnalité.
Très très belle approche, pour ajouter un autre volet de défilement avec une autre taille est très gentil.Excellente paul ..
J'ai eu les mêmes problèmes et les réponses ne m'a pas aidé. Quelques javascript plus loin, je pense que ce qui suit est une meilleure solution.
(quiconque sait comment transformer cela en plug-in jQuery?) P>
<!DOCTYPE html>
<html>
<head>
<title>Draggable limited to the container</title>
<style type="text/css">
#container {
cursor: move;
overflow: hidden;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.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">
$(function() {
$.globalVars = {
originalTop: 0,
originalLeft: 0,
maxHeight: $("#draggable").height() - $("#container").height(),
maxWidth: $("#draggable").width() - $("#container").width()
};
$("#draggable").draggable({
start: function(event, ui) {
if (ui.position != undefined) {
$.globalVars.originalTop = ui.position.top;
$.globalVars.originalLeft = ui.position.left;
}
},
drag: function(event, ui) {
var newTop = ui.position.top;
var newLeft = ui.position.left;
if (ui.position.top < 0 && ui.position.top * -1 > $.globalVars.maxHeight) {
newTop = $.globalVars.maxHeight * -1;
}
if (ui.position.top > 0) {
newTop = 0;
}
if (ui.position.left < 0 && ui.position.left * -1 > $.globalVars.maxWidth) {
newLeft = $.globalVars.maxWidth * -1;
}
if (ui.position.left > 0) {
newLeft = 0;
}
ui.position.top = newTop;
ui.position.left = newLeft;
}
});
});
</script>
</head>
<body>
<div id="container">
<img id="draggable" src="avatar.jpg" />
</div>
</body>
</html>
Vous n'avez rien à faire glisser pour ce type de structure. Ce dont vous avez besoin est de configurer le parent div avec Overflow-X: caché; et débordement-y: faites défiler;. De cette façon, son contenu sera défilable.
Si vous voulez masquer la barre de défilement, mettez simplement cette propriété: .DagPanel :: - webkit-Scrollbar {largeur: 0! important} et c'est tout! Je ne sais pas vraiment pourquoi vous pensais à faire glisser des éléments au lieu de simplement faire défiler le contenu (qui est le moyen correct d'effectuer ce type de "problèmes"). Quoi qu'il en soit, j'espère que cela aide quiconque doit correspondre à la même necesité. Salutations!