当我选择拖动元素时，可排序元素向上移动

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'});