A draggable element "shifts" from the pointer's position when being dragged between two scrolling divs, which are scrolled differently.
Similar to those described in #5059 or #3860, but is not (only) caused by the lack of "withinIncludingScrolloffsets", but because there is no way to compensate the differences in scrolling offsets when the dragged element is detached and re-attached from one div to another.
The attached patch supplies this functionality. Here is an example code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="src/scriptaculous.js" type="text/javascript"></script>
<style type="text/css" media="screen">
.box1 {
position:relative;
border:solid black 1px;
margin:0px;
padding:0px;
width:100px;
height:300px;
left:50px;
top:50px;
float:left;
overflow-y:scroll;
overflow-x:hidden;
}
.box2 {
position:relative;
border:solid black 1px;
margin:0px;
padding:0px;
width:100px;
height:300px;
left:50px;
top:50px;
float:left;
overflow-y:scroll;
overflow-x:hidden;
}
.handle{
background:lightgray;
margin:5px;
handle:move;
}
.item {
border:solid blue 1px;
background:#EEEEFF;
height:50px;
width:80px;
}
.item2 {
border:solid red 1px;
background:#FEEEEE;
height:50px;
width:80px;
}
</style>
</head>
<body>
<h1>Adjust scrolling offsets between two scrolling divs</h1>
Place the two scrollbars in different levels and then try dragging the items between two divs.<br>
blue items:ghosting off<br>
red items:ghosting on<br>
<div id="box1" class="box1">
<div id="item1" class="item"><span class="handle">item1</span></div>
<div id="item2" class="item"><span class="handle">item2</span></div>
<div id="item3" class="item"><span class="handle">item3</span></div>
<div id="item4" class="item"><span class="handle">item4</span></div>
<div id="item5" class="item"><span class="handle">item5</span></div>
<div id="item6" class="item"><span class="handle">item6</span></div>
<div id="item7" class="item"><span class="handle">item7</span></div>
<div id="item8" class="item"><span class="handle">item8</span></div>
<div id="item9" class="item"><span class="handle">item9</span></div>
<div id="item10" class="item"><span class="handle">item10</span></div>
</div>
<div id="box2" class="box2">
<div id="item11" class="item2"><span class="handle">item11</span></div>
<div id="item12" class="item2"><span class="handle">item12</span></div>
<div id="item13" class="item2"><span class="handle">item13</span></div>
<div id="item14" class="item2"><span class="handle">item14</span></div>
<div id="item15" class="item2"><span class="handle">item15</span></div>
<div id="item16" class="item2"><span class="handle">item16</span></div>
<div id="item17" class="item2"><span class="handle">item17</span></div>
<div id="item18" class="item2"><span class="handle">item18</span></div>
<div id="item19" class="item2"><span class="handle">item19</span></div>
<div id="item20" class="item2"><span class="handle">item20</span></div>
</div>
<script type="text/javascript" language="javascript">
//<![CDATA[
Sortable.create("box1", { tag:'div', scroll:'box1', ghosting:false, handle:'handle', revert:true, dropOnEmpty:true, constraint:false, containment:["box1", "box2"] } );
Sortable.create("box2", { tag:'div', scroll:'box2', ghosting:true, handle:'handle', revert:true, dropOnEmpty:true, constraint:false, containment:["box1", "box2"] } );
// ]]>
</script>
</body> </html>
