Draggable+Sortable & Scrollable Divs
I have a container with a list of draggable items and container with a
list of sortable items. The draggables & the sortable list is
connected, allowing the user to drag clones of the draggables to the
sorted list.
The draggable items appear in a vertical list, however the sortable
items appear in a horizontal list, achieved by floating them left. The
container of the sortable items has its overflow set to auto,
resulting in a horizontal scrollbar if the contents overflow. The two
containers appear right next to each other, the draggables to the left
& the sortables to the right.
The problem I'm experiencing is when the container of sortable items
is scrolled to the right, dragging from the draggables' container
immediately fires the sortables' events. It appears as if the contents
of the sortables' container is moved behind the draggables' container.
Here is my 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>
</html>
How can I avoid the sortable events to fire until the item is dragged
over the sortable container?
Thanks in advance