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\');
            }           
        });

如果您想将元素放回原处，在两侧添加填充将会有所帮助。一切都好!