2

jQuerysortableを使用して多数の をソートしていますp:panel。ただし、移動する要素を選択すると、他の要素が 1 つ上に移動するため、配置が難しくなります。要素が重なった場合にのみ上に移動する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>

どんな助けでも大歓迎です！ありがとう！

4

1 に答える 1

1

ドロッププレースホルダーを使用して、他の要素が移動しないようにすることはおそらく役立つでしょう。他の要素と同じようにスタイルを設定します。

$("#container").sortable({placeholder: '.placeholder'});
于 2013-01-24T05:44:34.370 に答える