Jquery trouble with sortable and dragging large items to the bottom

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

Answers


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!


Need Your Help

PHP $_GET verification

php forms validation post get

might be a silly question nonetheless:

Disable select option in IOS Safari

javascript ios mobile-safari

I've implemented a form which needs to disable certain options in a select box using Javascript. It works fine in all browsers but not in Safari on IOS (Desktop Safari does it right).

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.