2

ポートレットをドラッグし、いくつかの異なる接続された「.column」DIV 間で並べ替えるために、JQuery UI と Sortable を使用しています。

問題は、ポートレットを任意の列の最上部にドラッグするには、ポートレットの下部に向かってグリップ/クリックする必要があることです。ポートレットの上部をクリックまたはドラッグすると、列の最上部にポートレットを配置することはできません...少なくとも、ポートレットを移動するためのかなりの労力が必要です。

「cursorAt」属性を使用して、カーソルを強制的に下に移動しようとしましたが、通常はドラッグが機能しますが、目的の効果がありません。例: cursorAt: {左: 205、下: 5}

問題のjsfiddleは次のとおりです。

http://jsfiddle.net/KxP72/

それ以外の場合、JavaScript で始まるコードは次のとおりです。

$(function() {
$(".column").sortable({
    connectWith: ".column"
});
$(".column").disableSelection();
});

そしてここにCSSがあります

.ui-sortable-placeholder {border: 1px dashed #7E7F81; visibility: visible !important;            height: 200px !important;}
.ui-sortable-placeholder * {visibility: hidden;}
 #container {width: 100%; display: inline-block; border-top: 1px solid #3B3D41; border-       bottom: 1px solid #000; text-align: center;}
 #object_body {display: inline-block; margin: 0px auto 0px auto; padding: 200px 30px 200px 0px; position: relative; text-align: left;}
 div.column {float: left; display: inline-block; width: 437px;}
 div.portlet {display: inline-block; padding: 5px; width: 400px; min-height: 225px; background: #141517; border: 1px solid #111; margin: 25px 0px 0px 25px; color: #FFF; float: left; position: relative; cursor: move; box-shadow: 1px 1px 0px #3D3F42; -moz-border-     radius: 5px; border-radius: 5px;}
div.portlet img {width: 400px; margin-left: 0px;}

HTML は次のとおりです。

<div id="container">
<div id="object_body">
        <div class="column ui-sortable">
            <div class="portlet">
                <img src="http://druble.blob.core.windows.net/object/object_11151.jpg" style="height: 266px;">   
        </div>
            <div class="portlet">
                <img src="http://druble.blob.core.windows.net/object/object_11171.jpg" style="height: 266px;">   
        </div>
            <div class="portlet">
                <img src="http://druble.blob.core.windows.net/object/object_11191.jpg" style="height: 266px;">   
        </div>
        </div>
        <div class="column ui-sortable">
    <div class="portlet">
                <img src="http://druble.blob.core.windows.net/object/object_11161.jpg" style="height: 266px;">   
        </div>
            <div class="portlet">
                <img src="http://druble.blob.core.windows.net/object/object_19951.jpg" style="height: 501px;">   
        </div>
            <div class="portlet">
                <img src="http://druble.blob.core.windows.net/object/object_11201.jpg" style="height: 266px;">   
        </div>
        </div>
    </div>
</div>
4

1 に答える 1

4

float:leftfor.columnとを削除して.portlet、両方を inline-block の代わりに display:block にすることができます。それらも左揃えにするには、同様に変更でき#object_bodyますdisplay:block。

div.column {display: block;float: none;}
div.portlet {display: block;float: none;}

ここでjsfiddle http://jsfiddle.net/paulitto/KxP72/2/を更新しました

並べ替え可能なコンテナを使用すると、それが最上部に配置され、float:leftおよび/または作成され、その境界内で画像の並べ替えが問題になります（境界外であるため）。display:inlineたとえば、境界線を追加して.column、それがどのように見えるかを確認できます。

于 2013-05-04T07:45:03.313 に答える