Draggable + Sortable & amp; Divs Scrollable
https://stackoverflow.com/questions/1016559
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai un conteneur avec une liste d'éléments déplaçables et un conteneur avec une liste d'éléments triables. Les draggables & amp; la liste triable est connectée, ce qui permet à l’utilisateur de faire glisser les clones des objets glissables vers la liste triée.
Les éléments déplaçables apparaissent dans une liste verticale, mais les éléments pouvant être triés apparaissent dans une liste horizontale, obtenue en les faisant glisser à gauche. Le débordement du conteneur d'éléments triables est défini sur auto, ce qui crée une barre de défilement horizontale en cas de débordement du contenu. Les deux conteneurs apparaissent l'un à côté de l'autre, les objets déplaçables à gauche & amp; les sortables à droite.
Le problème que je rencontre est le défilement vers la droite du conteneur d'éléments triables, le fait de le faire glisser du conteneur des objets déplaçables déclenche immédiatement les événements des triables. Il semble que le contenu du conteneur de sortables soit déplacé derrière le conteneur de objets glissables.
Voici mon code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Sortables in scrollable divs</title>
<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("#sortable").sortable({
start: function(event, ui) {
if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag start");
},
stop: function(event, ui) {
if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag stopped");
if (ui.item !== null) console.log("sortable item \"" + ui.item.text() + "\" drag stopped");
}
});
$("#sortable").sortable("disable");
$("#draggable li").draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid',
cursor: "default",
cursorAt: { top: -5, left: -5 },
start: function(event, ui) {
if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag start");
},
stop: function(event, ui) {
if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag stopped");
}
});
$("#container2").mouseenter(function() {
console.log("enter sortable container");
$("#sortable").sortable("enable");
}).mouseleave(function() {
console.log("leaving sortable container");
$("#sortable").sortable("disable");
});
$("#draggable, #sortable").disableSelection();
});
</script>
<style type="text/css">
html, body, p, td, th, li, input, select, option, textarea
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#343E41;
}
.wrapper
{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
height: expression(this.parentNode.offsetHeight + "px");
}
.scroll-wrapper
{
position: relative;
width: 100%;
height: 100%;
overflow: auto;
height: expression(this.parentNode.offsetHeight + "px");
}
#container1
{
float:left;
width:200px;
height:400px;
overflow:auto;
border:solid #000 1px;
margin:5px;
}
#container2
{
float:left;
width:600px;
height:400px;
overflow:auto;
border:solid #000 1px;
margin:5px;
}
ul#draggable
{
padding:0;
margin:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
ul#draggable li
{
display:block;
margin:5px;
border:solid #000 1px;
height:50px;
width:150px;
}
ul#sortable
{
padding:0;
margin:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
height:380px;
width:744px;
}
ul#sortable li
{
display:block;
float:left;
margin:5px;
border:solid #000 1px;
height:370px;
width:50px;
text-align:center;
}
</style>
</head>
<body>
<form id="form1" action="">
<div id="container1">
<ul id="draggable">
<li>1A</li>
<li>2A</li>
<li>3A</li>
<li>4A</li>
<li>5A</li>
<li>6A</li>
<li>7A</li>
<li>8A</li>
<li>9A</li>
<li>10A</li>
<li>11A</li>
<li>12A</li>
</ul>
</div>
<div id="container2">
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
</div>
</form>
</body>
Comment puis-je éviter les événements triables à déclencher jusqu'à ce que l'élément soit déplacé sur le conteneur triable?
Merci d'avance
La solution
Cela fait longtemps que je n'ai pas posté cette question et depuis lors, de nouvelles versions de jQuery & amp; jQuery UI a été publié.
De plus, l'équipe de développement de jQuery UI a ajouté un exemple de objets glissables liés à des objets de tri.
J'ai donc mis à jour mon exemple de code d'origine ci-dessus et je l'ai modifié afin qu'il corresponde à mon scénario. Je voulais une section triable à défilement horizontal qui s’agrandisse automatiquement lorsque de nouveaux éléments sont ajoutés.
Mon exemple ci-dessous a résolu mon problème et le code semble beaucoup plus net & amp; plus simple:
$(function () {
$("#sortable").sortable({
revert: true,
start: function (event, ui) {
$(this).width($(this).width() + ui.helper.width() + 12);
},
stop: function (event, ui) {
var w = 0;
$(this).children("li").each(function () {
w += $(this).width() + parseInt($(this).css("margin-left")) + parseInt($(this).css("margin-right")) + 2;
});
$(this).width(w);
}
});
var w = 0;
$("#sortable").children("li").each(function () {
w += $(this).width() + parseInt($(this).css("margin-left")) + parseInt($(this).css("margin-right")) + 2;
});
$("#sortable").width(w);
$("#draggable li").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$("ul, li").disableSelection();
});html, body, p, td, th, li, input, select, option, textarea
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#343E41;
}
.wrapper
{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
height: expression(this.parentNode.offsetHeight + "px");
}
.scroll-wrapper
{
position: relative;
width: 100%;
height: 100%;
overflow: auto;
height: expression(this.parentNode.offsetHeight + "px");
}
#container1
{
float:left;
width:200px;
height:400px;
overflow:auto;
border:solid #000 1px;
margin:5px;
}
#container2
{
float:left;
width:600px;
height:400px;
overflow:auto;
border:solid #000 1px;
margin:5px;
}
ul#draggable
{
padding:0;
margin:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
ul#draggable li
{
display:block;
margin:5px;
border:solid #000 1px;
height:50px;
width:150px;
}
ul#sortable
{
padding:0;
margin:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
height:380px;
}
ul#sortable li
{
display:block;
float:left;
margin:5px;
border:solid #000 1px;
height:370px;
width:50px;
text-align:center;
} <script type="text/javascript" language="JavaScript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<form id="form1" action="">
<div id="container1">
<ul id="draggable">
<li>1A</li>
<li>2A</li>
<li>3A</li>
<li>4A</li>
<li>5A</li>
<li>6A</li>
<li>7A</li>
<li>8A</li>
<li>9A</li>
<li>10A</li>
<li>11A</li>
<li>12A</li>
</ul>
</div>
<div id="container2">
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
</div>
</form>
Je pensais que quelqu'un, quelque part, aimerait faire de même et a besoin d'aide: D
