java - 如何使用带有背景标尺/图形的 Richfaces 实现组件的拖放以获得准确的坐标

Question

如何使用带有背景标尺/图表的 Richfaces 实现组件的拖放以获得准确的坐标。

使用以下代码将组件添加(拖/放)到面板

<h:panelGrid columns="4" styleClass="main-tab-panel" style="width:1000px;height: 300px ">
<!-- Draggable components which can be dragged and dropped in Drop zones -->
<rich:simpleTogglePanel switchType="client" style="height:500px" bodyClass="rich-laguna-panel-no-header">
<rich:tabPanel  selectedTab="createForm"  style="background-color:#{richSkin.tabBackgroundColor};width:110px;">
    <rich:tab id="createForm" >
      <f:facet name="label"><h:outputText value="Add Fields"/></f:facet>

         <rich:dataGrid id="srcTable"  columns="1" value="#{dragDropService.sourceComponents}" var="_srcComponent">
         <rich:column styleClass="fdAddButton">
            <a:outputPanel style="width:128px;"
                           onmouseover="this.style.cursor='move'" layout="block">
                <rich:dragSupport dragIndicator="indicator"
                                  dragType="DRAG_COMPONENT" dragValue="#{_srcComponent}">
                   <rich:dndParam id="test" name="label" value="#{_srcComponent.displayName}"  />
                </rich:dragSupport>
              <h:outputText value="#{_srcComponent.fieldName}" styleClass="fdAddButton" onmouseover="this.className='fdAddButton-act'"  onmouseout="this.className='fdAddButton'"></h:outputText>
            </a:outputPanel>
         </rich:column>
    </rich:dataGrid>
  </rich:tab>
  </rich:tabPanel>
 </rich:simpleTogglePanel>

<rich:panel id="ctrlPanel"  style="width:1000px;height:500px;">
      <f:facet name="header"><h:outputText value="Drop Zone "/></f:facet>
    <rich:separator></rich:separator>
     <rich:dropSupport acceptedTypes="DRAG_COMPONENT" dropValue="" dropListener="#{dragDropService.processDrop}" reRender="dropTable,srcTable">
     </rich:dropSupport>
     <h:panelGroup id="dropTable" binding="#{dragDropService.panelGroup}">
        </h:panelGroup>

我正在尝试使用以下代码获取坐标:

//<![CDATA[
function getOffset(){
    //parent - panel Grid
    var parent = document.getElementById('contentForm:dropTable');
    parentObject=parent.getBoundingClientRect();
    var parentTop=parentObject.top;
    var parentLeft=parentObject.left;

    var positions = new Array();
    var delimitedValues;

    var child = parent.getElementsByTagName('table');
    var name = parent.getElementsByTagName('label');


    for(i = 0 ; i <= child.length - 1; i++){

        var component = child.item(i);
        rectObject = component.getBoundingClientRect();

        var childTop=rectObject.top-parentTop;
        var childLeft=rectObject.left-parentLeft;
        var field = name.item(i).innerHTML;
        positions.push([childTop,childLeft,field]);
        delimitedValues = positions.join("|");

        alert(delimitedValues+"   delimitedValues");

    }


    document.getElementById('contentForm:childOffset').value = delimitedValues;

}

//]]>

当我们拖放时，组件会重叠。尽管我将新组件拖动到现有组件旁边，但组件并未并排放置，即放置在多列中。如何达到这些标准。

Answer 1

RichFaces 的拖放功能并不是真正为您想要做的事情而设计的，但类似这样的功能可能会起作用:

<a4j:jsFunction>可用于将数据从 JavaScript 发送到您的 bean

<a4j:jsFunction name="setPosition">
    <a4j:actionparam assignTo="#{bean.id}" name="id"/>
    <a4j:actionparam assignTo="#{bean.top}" name="top"/>
    <a4j:actionparam assignTo="#{bean.left}" name="left"/>
</a4j:jsFunction>

然后你需要使你的组件可拖动并在停止拖动时调用 jsFunction ； RF 3用途draggable from sript.aculo.us :

new Draggable('componentId', { onEnd : function (obj, event) {
    setPosition( obj.element.id , event.y , event.x );
});

事件是标准的mouseevent，所以你可能需要一组不同的坐标，当然你应该只使用一个参数，然后在bean中解析它，你不能直接调用bean方法并使用参数作为参数.