Question

Basically I have 2 list with ‘widgets’ in each and some of them can be quite big.
I’ve Simplified all the code down to this. Here is the javascript

<script type="text/javascript">
    $(function() {
        $(".homepage-right" ).sortable({
            revert: 200,
            connectWith:["#homepage-left","#homepage-right"],
            placeholder: "homepage-element-placeholder",
            cancel: ".homepage-disable-drag",
            opacity:0.7,
            distance:30,
            handle:".box-title",
            start: function (event,ui) {
                height = $(ui.item).outerHeight();
                left_height = $("#homepage-right").height();
                $("#homepage-left").attr(\'height\',(height+left_height)+\'px\');
                $(".homepage-left" ).css(\'padding-bottom\',height*2);
                $(".homepage-element-placeholder").css(\'height\',height);
            },
            receive: function(event,ui) {
                homepage_reload_node(event,ui,2);
            },
            stop:  function(event,ui) {
                homepage_save_layout();
                    $(".homepage-left" ).css(\'padding-bottom\',\'0px\');
                    $(".homepage-right" ).css(\'padding-bottom\',\'0px\');
            }           
        });
        $(".homepage-left" ).sortable({
            revert: 200,
            connectWith:["#homepage-left","#homepage-right"],
            placeholder: "homepage-element-placeholder",
            cancel: ".homepage-disable-drag",
            opacity:0.7,
            handle:".box-title",
            start: function (event,ui) {
                height = $(ui.item).outerHeight();
                left_height = $("#homepage-right").height();
                $("#homepage-right").attr(\'height\',(height+left_height)+\'px\');
                $(".homepage-right" ).css(\'padding-bottom\',height*2);
                $(".homepage-element-placeholder").css(\'height\',height);
            },
            receive: function(event,ui) {
                homepage_reload_node(event,ui,1);
            },
            stop:  function(event,ui) {
                homepage_save_layout();
                $(".homepage-left" ).css(\'padding-bottom\',\'0px\');
                    $(".homepage-right" ).css(\'padding-bottom\',\'0px\');
            }           
        });
    });


</script>

and here is the html

        <div class="box_white" style=";" id="homepage_object_5">
<div class="box-title"><div style="float:right;">
        <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3  >title</a></h3><div class="clear"></div></div>

        <div class="box-content" ><div style="text-align:center;margin-top: 10px;">
            some content
</div>
</div>

</div><div class="box_white" style=";" id="homepage_object_5">
<div class="box-title"><div style="float:right;">
        <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3  >title</a></h3><div class="clear"></div></div>

        <div class="box-content" ><div style="text-align:center;margin-top: 10px;">
            some content
</div>
</div>

</div><div class="box_white" style=";" id="homepage_object_5">
<div class="box-title"><div style="float:right;">
        <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3  >title</a></h3><div class="clear"></div></div>

        <div class="box-content" ><div style="text-align:center;margin-top: 10px;">
            some content

</div>
</div>

</div><div class="box_white" style=";" id="homepage_object_5">
<div class="box-title"><div style="float:right;">
        <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3  >title</a></h3><div class="clear"></div></div>

        <div class="box-content" ><div style="text-align:center;margin-top: 10px;">
            some content
</div>
</div>

</div>

    </div>

<div id="homepage-left" class="homepage-left">
    <div class="box_white" style=";" id="homepage_object_5">
<div class="box-title"><div style="float:right;">
        <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3  >title</a></h3><div class="clear"></div></div>

        <div class="box-content" ><div style="text-align:center;margin-top: 10px;">
            some content
</div>
</div>

</div><div class="box_white" style=";" id="homepage_object_5">
<div class="box-title"><div style="float:right;">
        <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3  >title</a></h3><div class="clear"></div></div>

        <div class="box-content" ><div style="text-align:center;margin-top: 10px;">
            some content
</div>
</div>

</div><div class="box_white" style=";" id="homepage_object_5">
<div class="box-title"><div style="float:right;">
        <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3  >title</a></h3><div class="clear"></div></div>

        <div class="box-content" ><div style="text-align:center;margin-top: 10px;">
            some content
</div>
</div>

</div><div class="box_white" style=";" id="homepage_object_5">
<div class="box-title"><div style="float:right;">
        <a href="javascript:;"><img class="home_remove_button" onclick="homepage_node_delete(5);" align="right" src="cross.jpg" style="vertical-align:middle;" border="0" alt="Remove"/></a></div><h3  >title</a></h3><div class="clear"></div></div>

        <div class="box-content" ><div style="text-align:center;margin-top: 10px;">
            some content

</div>
</div>

</div>
</div>

They are basically a 2 list one slightly wider than the other.
The problem I’m having is dragging an element from the bottom one list to another doesn’t make the placeholder appear. I’ve (as you see) tried adding extra height and padding when dragging but it doesn’t seem to help. The placeholder and thus dragging is only available after you get your widget and then touch the bottom of the previous one. Is there a fix for this?
Thanks
Richard

Answer 1

K found the answer basically it is down to the padding and you also need to call the refresh command as well. so

Like this

$(".homepage-left" ).sortable({
            revert: 200,
            refreshPositions :true,
            connectWith:["#homepage-left","#homepage-right"],
            placeholder: "homepage-element-placeholder",
            cancel: ".homepage-disable-drag",
            opacity:0.7,
            scroll: true,
            handle:".box-title",
            tolerance :"intersect",
            dropOnEmpty:true,
            start: function (event,ui) {
                height = $(ui.item).outerHeight();
                width = $(ui.item).outerWidth();
                left_height = $("#homepage-right").height();
                $(".homepage-right" ).css(\'padding-bottom\',height);
                $(".homepage-left" ).css(\'padding-bottom\',height);
                $(".homepage-element-placeholder").css(\'height\',height);
                $(".homepage-element-placeholder").css(\'width\',width);
                $("#homepage-right" ).sortable(\'refresh\');
                $("#homepage-left" ).sortable(\'refresh\');

            },
            receive: function(event,ui) {
                homepage_reload_node(event,ui,1);
            },
            stop:  function(event,ui) {
                homepage_save_layout();
                $(".homepage-left" ).css(\'padding-bottom\',\'0px\');
                $(".homepage-right" ).css(\'padding-bottom\',\'0px\');
            }           
        });

Adding the padding on both side will help if you want to keep the item back in it’s place.
All good!