當我選擇拖動元素時，可排序元素向上移動

Question

我正在使用jQuery sortable來排序若干p:panel s。但是，當我選擇要移動的任何元素時，其他元素向上移動一個位置使得定位變得困難。我想完全按照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'});