jquery - 当我选择一个元素进行拖动时，可排序元素会向上移动

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

使用 drop placeholder 可能会有所帮助以防止其他元素移动。只需将其样式设置为与其他元素相同即可:

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