Question

我正在使用JQuery UI和Sortable来拖动portlet并在几个不同的连接“.column”DIV之间重新排序。

问题是，为了将portlet拖动到任何列的最顶部位置，必须抓住/单击portlet的底部。如果从portlet的顶部单击/拖动，则无法将portlet放在列的最顶部...至少不需要花费大量精力移动portlet。

我尝试使用“cursorAt”属性将光标强制到底部，拖动通常可以正常工作，但它没有达到预期的效果。示例：cursorAt：{left：205，bottom：5}

这是问题的一个方面：

否则，这是代码，从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>

Answer 1

您可以删除float:left和.column的{{1}}，并将它们设为display：block而不是inline-block。要使它们也对齐，您也可以将.portlet更改为#object_body。

display:block

这里我更新了jsfiddle http://jsfiddle.net/paulitto/KxP72/2/

对于具有div.column {display: block;float: none;} div.portlet {display: block;float: none;}和/或float:left的可排序容器使其位于最顶层，图像排序在该范围内变得有问题（因为它们不在其中）。您可以例如向display:inline添加边框并查看其外观。

JQuery UI可排序仅允许从底部抓取时拖动到顶部

1 个答案: