jQuery UI: Draggable de Défilement Problème

Je suis en train de construire un draggable/drop dossier-fichier de vue avec jQuery UI, mais je suis confronté à un problème avec, je crois que ce qui est attribué à l'aide. Voici mon code:

Le code HTML

<body>
<div id="topContainer">
<span>Parent Directory 1</span>
</div>
<span id="topFolder" class="folder">
<div class="drop">
</div>
</span>
<hr />
<div id="container" class="container">
<div class="dropzone">
<span>Parent Directory 2</span>
</div>
<div id="cont1" class="container">
<div class="dropzone">
<span>Folder 1</span>
</div>
<span id="folder1" class="folder">
<div class="drop">
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
<div class="drag">&nbsp;</div>
</div>
</span>
</div>
<div id="cont2" class="container">
<div class="dropzone">
<span>Folder 2</span>
</div>
<span id="folder2" class="folder">
<div class="drop">
</div>
</span>
</div>
<div id="cont3" class="container">
<div class="dropzone">
<span>Folder 3</span>
</div>
<span id="folder3" class="folder">
<div class="drop">
</div>
</span>
</div>
<span id="mainFolder" class="folder">
<div class="drop">
<div class="drag">&nbsp;</div>
</div>
</span>
</div>
</body>

Le jQuery

$(document).ready(function () {
var opts = {
helper: 'clone',
appendTo: 'body'
//appendTo: '#container'
};
$('div.drag').each(function () {
$(this).draggable(opts);
});
$('.dropzone, #topContainer').droppable({
drop: function (e, ui) {
var clone = $(ui.draggable).clone();
clone.draggable(opts);
$(this).siblings('.folder').children('.drop').append(clone);
$(this).removeClass('over');
},
over: function (e, ui) {
$(this).addClass('over');
},
out: function (e, ui) {
$(this).removeClass('over');
}
});
});

Le CSS

.dropzone {
height: 300px;
width: 100px;
border: 1px solid black;
}
.drag {
clear: both;
height: 50px;
width: 80px;
background-color: black;
position: relative;
cursor: pointer;
}
#topContainer, .dropzone {
height: 50px;
width: 300px;
border: 2px solid black;
text-align: center;
}
.folder .drag {
margin: 5px;
}
.container {
border: 2px solid blue;
margin: 10px;
}
.over {
background-color: yellow;
}    
#container {
width: 800px;
height: 600px;
overflow-y: scroll;
border-color: red;
position: relative;
}

Le Violon: jsFiddle

L'idée est donc... vous faites glisser l'un des blocs noirs vers le dossier souhaité (Répertoire Parent 1, Parent Directory 2, Dossier 1, etc.). Que tout semble bien fonctionner.

Ce qui ne fonctionne pas beaux, c'est quand le parent (#container) ou corps ont un dépassement de capacité. Si vous cliquez sur un bloc pour faire glisser et essayer de rouler la molette de défilement, vous ne pouvez pas... ou si vous continuez à essayer, vous pourrez parfois. (Il n'est pas évident avec la résolution de mon écran, mais en coulisse code, il y a une barre de défilement pour le #élément conteneur) je suppose que cela a quelque chose à voir avec l'accent de là où je suis ajoutant que le helper.

Parce que j'ai commencé à penser à ce dernier, j'ai commencé ajout de l'aide à différents endroits. Avec #container étant le domaine, je suis le plus intéressé, je peux ajouter l'aide là-bas et obtenir le défilement fonctionne très bien (décommenter //appendTo: '#container' et commentez la appendTo: 'body').

Toutefois, cela introduit un autre problème. Maintenant que je suis en ajoutant le #élément conteneur, mon bloc ne peut pas être vu quand il est traîné jusqu'à la Répertoire Parent 1 dossier, qui me portent à croire qu'il y a juste quelque chose de mal avec l'aide.

Bien sûr, si vous n'avez pas d'utilisateur helper: "clone", vous pouvez faire défiler simplement magnifique. Ce n'est pas une option parce que j'aime avoir mon clone. Je me tourne donc vers y'all. Comment puis-je résoudre mon problème, et ce qui se passe exactement? Quelqu'un aurait-il des conseils? Je serais ravi de l'entendre.

Il est également bon de noter que j'ai essayé de réglage de la zIndex et la pile d'options pour la déplaçable, mais pas y aller. Je suppose que je vais devoir faire un personnalisé fonction d'assistance, et de le rendre conscient de ce qu'il est actuellement déplacé... mais, je l'espère, il est plus facile de corriger.

Si quelqu'un a des connaissances, je serais ravi de l'entendre. Merci!

Je suis un peu perplexe... est-ce que 'helper' une méthode par défaut ou juste une variable définie? Plz clearify sur ce, merci!
Salut Adam, c'est une option, vous pouvez spécifier lors de la création d'un objet déplaçable en jQuery. Voir pour plus d'informations.

OriginalL'auteur incutonez | 2013-04-15

Heres un code à partir d'un violon: http://jsfiddle.net/crowjonah/Fr7u8/3/

HTML:

<table>
<tr class="drag_me">
<td>drag me</td>
</tr>
<tr class="drag_me">
<td>drag me</td>
</tr>
<tr class="drag_me">
<td>drag me</td>
</tr>
<tr class="drag_me">
<td>drag me</td>
</tr>
</table>
<div class="upper"></div>
<div class="drop_area">
<ul>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
<li class="drop_on_me">drop here</li>
</ul>
</div>
<div class="lower"></div>

jQuery:

$('.drag_me').draggable({
helper: 'clone',
scroll: 'true',
refreshPositions: true
});
$('.drop_on_me').droppable({
accept: '.drag_me',
activeClass: 'active',
hoverClass: 'hover',
tolerance: 'pointer'
});
$('.upper').droppable({
over: function(event, ui){
$('.drop_area').autoscroll({
direction: 'up',
step: 150,
scroll: true
});
},
out: function(event, ui){
$('.drop_area').autoscroll('destroy');
}
});
$('.lower').droppable({
over: function(event, ui){
$('.drop_area').autoscroll({
direction: 'down',
step: 150,
scroll: true
});
},
out: function(event, ui){
$('.drop_area').autoscroll('destroy');
}
});

Liés à cette question: jQuery UI: Draggable de Défilement Problème

Son un exemple de travail d'un dragable élément à l'intérieur d'un conteneur avec overflow: scroll

OriginalL'auteur ggzone

Vous devez vous connecter pour publier un commentaire.