Draggable Blocks Size problem

Hello,

I am attempting to build a drag and drop block system using scriptaculous sortables. I have a small problem, in that for some reason my block is not acting as one. The handle seems to strecth until the block aboves handle (Not the bottom of the DIV) For example, if I have 2 blocks. The first block can only be picked up at the very top. The second block can be picked up all the way until just below the title of the first block and only just past the handle (cutting into the first block). If I had a third block, that block would be pickup able all the way upto the title of the second block etc. I can’t understand why this might be happening, I think I closed all my divs etc.

The crazy thing is, it actually works fine on IE. When has that ever happened before??

Code looks like this.

<div id="c4" class="column">
    <div class="block" id="archives_block">
    <div class="bcontent">
    <!-- Content -->
        <div id="archives" class="blck">
            <h3><a href="/section/show/7">ARCHIVES</a></h3>
            <br class="clear" />
            <div class="inside">
                <p>View the archives</p>
                <p>dropdown form here</p>
            </div><!--/inside-->
            </div><!--/archives-->
        </div><!-- bcontent -->
    </div><!-- block -->
    <div class="block" id="news_block">
    <div class="bcontent">
            <!-- Content -->
            <div id="news" class="blck sml">
                    <h3><a href="/section/show/2"</a></h3>
                    <a href="#"><img class="news_rss" src="/images/rss.png" alt="rss feed" width="14" height="14" /></a>
                    <br class="clear" />
                    <ul class ="lst"> 
                        <li>
                            <a href="#"><img src="/images/news_tn.jpg" alt="" width="72" height="60" /></a>
                        A few words of description here ok a bit more text
                    </li>

                    <li>
                            <a href="#"><img src="/images/news_tn.jpg" alt="" width="72" height="60" /></a>
                         A few words of description here ok a bit more text
                        </li>
                    </ul>
                </div><!--/news-->
        </div><!-- bcontent -->
      </div><!-- block -->
</div>

+ 3 more columns similar

    <script type="text/javascript">
//<![CDATA[
try {
create_sortables('portal', 'column', 'home', false)
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('create_sortables(\'portal\', \'column\', \'home\', false)'); throw e }
//]]>
</script>

function create_sortables(portal_name, column_name, controller_name, add_title){
    var sortables = $$("#"+portal_name+" ."+column_name).collect(
        function(value, index) {
            if(add_title){
                add_column_title(value, value.identify());
            }
            create_sortable(value, sortables, controller_name);
            value.select('div .toggle').collect(
                function(value2, index2){
                    Event.observe(value2, 'click', hideLabel);
                }
            )
        })
}

function create_sortable(value, sortables, controller_name){
    Sortable.create(value, { 
                    format: /^(.*)$/,
                    containment: sortables,
                    constraint: false,
                    tag: 'div',
                    only: 'block',
                    dropOnEmpty: true,
                    // handle: 'block',
                    hoverclass: 'hover',
                    onUpdate: function(){new Ajax.Request('/block_admin/update?con='+controller_name, {asynchronous:true, evalScripts:true, parameters:Sortable.serialize(value)})}
    });
}

.column {
background-color:#000000;
display:inline;
float:right;
margin:0px 8px;
width:216px;
}

.blck {
background-color:#FFFFFF;
clear:both;
float:left;
margin:0px 0px 16px;
padding:10px 0pt 0pt;
position:relative;
width:216px;
}

.blck h3 {
color:#000000;
display:block;
float:left;
margin:0px;
padding:0px;
}

.inside {
margin-left:10px;
margin-right:10px;
}

ul.lst {
clear:both;
margin-top:0px;
}
ul.lst, .lst li, .lst h5 {
margin:0px;
padding:0px;
}

Hey there,

These forums are not exactly a support list, especially outside the context of the book itself. Just now, I won’t have the time to dive into your problem and help. I suggest you take the following steps:

1. Create a minimalist page that reproduces your issue, preferrably a single file (except for the libs)
2. Put it somewhere online.
3. Subscribe to the new official support list
4. Ask for help on it, linking to our online page.

I hope you’ll get a good reply!