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

両側にパディングを追加すると、アイテムをその場所に戻したい場合に役立ちます。すべて良い！