当我选择一个要拖动的元素时，可排序的元素会向上移动

Question

我正在使用jQuery sortable对许多p:panel进行排序。但是，当我选择要移动的任何元素时，其他元素会向上移动一个位置，这使得定位变得困难。我想完全按照jQueryUI Sortable中的排序方式进行排序，其中元素仅在重叠时才向上移动。有什么属性可以做吗？

这是我的 jsf 代码：

<p:outputPanel id="dragPanel" styleClass="enumDiv">
    <ui:repeat value="#{numberEnumComponent.values}" var="numEnum"
        varStatus="values">
        <h:panelGrid columns="3" columnClasses="td-top,td-top,td-top"
            width="30%" style="padding-left: 10px;">
            <p:panel>
                <p:inputText value="#{numberEnumComponent.values[values.index]}"
                    id="numInput" binding="#{numInput}">
                    <f:converter converterId="javax.faces.BigDecimal"></f:converter>
                </p:inputText>
                <h:graphicImage value="#{msg.icon_type_NUMBER_ENUM}" id="enumIcon" style="padding-left:10px;"></h:graphicImage>
                <h:form id="removeForm" style="display:inline-block; padding-left:10px;">
                    <h:commandButton action="#{numberEnumComponent.removeNumEnum}"
                        image="#{numberEnumComponent.values.size() == 1 ? msg.icon_remove_disabled : msg.icon_remove}"
                        immediate="true"
                        disabled="#{numberEnumComponent.values.size() == 1}">
                        <f:setPropertyActionListener
                            target="#{numberEnumComponent.removePosition}"
                            value="#{values.index}"></f:setPropertyActionListener>
                    </h:commandButton>
                    <p:remoteCommand name="enumMovement" action="#{numberEnumComponent.columnMovement}">
                    </p:remoteCommand>
                </h:form>
            </p:panel>
        </h:panelGrid>
    </ui:repeat>
</p:outputPanel>

任何帮助将不胜感激！谢谢！

Answer 1

使用放置占位符来防止其他元素移动可能会有所帮助。 只需将其样式与其他元素相同：

$("#container").sortable({placeholder: '.placeholder'});