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

  1. 9

    Utiliser le confinement option:

    $('.myList').draggable({
    axis: 'y',
    containment: 'parent'
});
    Le parent est de plus petite hieght que son enfant quand j'ai essayer cette option, le glissement ne fonctionne pas - la liste juste une sorte de sauts entre le haut et le bas
    Ce était génial. facile

    OriginalL'auteur moff

  2. 6

    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?)

    <!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>

    OriginalL'auteur Lode

  3. 3

    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:

    <script type="text/javascript">
$(document).ready(function() {
CreateContainerDiv();
$('.dragPanel').addClass("hover");
$('.myList').draggable({ axis: 'y', containment: 'parent' });
});
function CreateContainerDiv() {
var dragPanel = $('.dragPanel');
var dragTarget = $('.myList');
//add the container panel
var newPanelHeight = dragTarget.outerHeight() * 2 - dragPanel.outerHeight();
dragTarget.wrap(document.createElement("div"));
//set its height and put it in the right place
dragTarget.parent().css("height", newPanelHeight);
dragTarget.parent().css("position", "relative");
var newPanelPosition = ((dragTarget.outerHeight() * -1) / 2);
dragTarget.parent().css("top", newPanelPosition);         
}
</script>

    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

    très très belle approche , pour ajouter une autre de défilement-volet avec quelques autres la taille est très agréable.Excellent Paul..

    OriginalL'auteur Paul

  4. 0

    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