Ziehbar + Sortable & Rollbar Divs
https://stackoverflow.com/questions/1016559
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe einen Behälter mit einer Liste von ziehbar Gegenständen und Behältern mit einer Liste der sortierbare Gegenstände. Die draggables & die sortierbare Liste verbunden ist, so dass der Benutzer Klone der draggables auf der sortierten Liste ziehen.
Die ziehbar Elemente erscheinen in einer vertikalen Liste, aber die sortierbare Elemente in einer horizontalen Liste angezeigt wird, erreicht, indem sie links schweben. Der Behälter der sortierbare Elemente hat seinen Überlauf auf auto gesetzt, was zu einer horizontalen Scrollbar, wenn der Überlauf Inhalt. Die beiden Behälter erscheinen direkt nebeneinander, die draggables nach links und die sortables nach rechts.
Das Problem ich erlebe ist, wenn der Behälter von sortierbare Gegenständen nach rechts gescrollt wird, aus dem draggables zieht Container sofort feuert die sortables' Veranstaltungen. Es scheint, als ob der Inhalt des sortables Containers Container befindet sich hinter dem draggables bewegt.
Hier ist mein 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>
Wie kann ich die sortierbare Ereignisse vermeiden Feuer, bis das Element über den sortierbar Behälter gezogen wird?
Vielen Dank im Voraus
Lösung
Es ist schon lange her, seit ich diese Frage gestellt und seitdem neue Versionen von jQuery & jQuery UI werden veröffentlicht.
Darüber hinaus hat das Entwicklungsteam von jQuery UI ein Beispiel draggables mit sortables verbunden sind, hinzugefügt wurden.
Also hat ich meinen ursprünglichen obigen Beispielcode aktualisiert und geändert, so dass es mein Szenario maches. Ich wollte ein horizontales Scrollen sortierbar Abschnitt, der automatisch erweitert werden, wenn neue Elemente hinzugefügt wurden.
finden Sie unten Mein Beispiel hat beschlossen, mein Problem und der Code sieht viel sauberer und einfacher:
$(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>
dachte, jemand, irgendwo könnte das Gleiche zu tun und braucht Hilfe: D
