Jquery在排序和拖动大项目到底部时遇到麻烦

Question

基本上我每个都有2个带有'小部件'的列表,其中一些可能非常大.我已将所有代码简化为此.这是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>

这是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>

它们基本上是一个比另一个略宽的2个列表.我遇到的问题是将元素从底部列表拖到另一个列表不会使占位符出现.我(正如你所看到的)尝试在拖动时添加额外的高度和填充,但似乎没有帮助.只有在获取窗口小部件然后触摸上一个窗口的底部后,才能使用占位符和拖动.有没有解决这个问题？谢谢理查德

Answer 1

K找到答案基本上是填充,你也需要调用刷新命令.所以

像这样

$(".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\');
            }           
        });

如果要将项目放回原位,则在两侧添加填充将有所帮助.都好!