Script.aculo.us Sortable divs problem.

Hi,

I’m using Script.aculo.us for a project, and I’m using the Sortable feature, so the user can reorganise the position of some blocks.

But there’s one strange thing:
When I drag a block, to the left, under an other block, I get this:
[img]http://www.lucasvd.nl/images/good.png[/img]
So far, so good.

But when I move the block a little bit further to the left, still under the other block, I get this:

[img]http://www.lucasvd.nl/images/wrong.png[/img]
The other block moves down, and the place marker moves up, while I’m in fact still under the other block.

This is the code of my block:

[code]
<div class=”block”>
<div class=”topRound_orange” onmouseover=”showElement(‘control_2’, ‘inline’);” onmouseout=”hideElement(‘control_2’);”>
<h2 class=”headerTitel” style=”float: left; cursor: move;”>Hotels</h2>
<span style=”float: right; display: none;” id=”control_2″>
<a class=”control” style=”cursor: pointer;” id=”plusmin_2″ title=”Minimaliseer” onclick=”BlindEffect(‘content_2’);”>-</a>
<a class=”control” style=”cursor: pointer;” onclick=”delete_block(‘2’);” id=”close_2″>x</a>
&nbsp;
</span>
</div>
<div class=”step” id=”content_2″ style=”text-align: left; height: auto; padding-bottom: 5px;”>
<ul class=”sublist” style=”margin-left: 10px; list-style: none;”>
<li id=”link_6″ onmouseover=”showElement(‘link_control_6’, ‘inline’);” onmouseout=”hideElement(‘link_control_6’);”>
<span style=”float: left;”>
<a href=”http://incase4u.komto.net/link/bekijk/6/”>Hof van Gelre</a>
</span>
<span style=”float: right; display: none; margin-right: 5px;” id=”link_control_6″>
<img src=”/images/icons/link_delete.png” onclick=”delete_link(6);” style=”cursor: pointer;” alt=”Delete” />
</span>
<br style=”clear: both;” />
</li>
</ul>
</div>
<div class=”bottomRound”></div>
</div>
[/code]

And this is how I create the sortables:

[code]
<script type=”text/javascript”>
// <![CDATA[
Sortable.create(“kolom0”,
{tag: ‘div’, handle: ‘headerTitel’, only: ‘block’, overlap: ‘horizontal’, dropOnEmpty: true, containment: [“kolom0″,”kolom1″,”kolom2”], constraint: false});
Sortable.create(“kolom1”,
{tag: ‘div’, handle: ‘headerTitel’, only: ‘block’, overlap: ‘horizontal’, dropOnEmpty: true, containment: [“kolom0″,”kolom1″,”kolom2”], constraint: false});
Sortable.create(“kolom2”,
{tag: ‘div’, handle: ‘headerTitel’, only: ‘block’, overlap: ‘horizontal’, dropOnEmpty: true, containment: [“kolom0″,”kolom1″,”kolom2”], constraint: false});
// ]]>
</script>
[/code]

Anyone an idea why dragging is acting so strange?

Also in #JavaScript _↴