如何實現使用具有背景標尺/圖形的richfaces拖放組件以獲得確切的座標

如何實現使用帶有背景標尺/圖形的richfaces拖放組件以獲得確切的座標。如何實現使用具有背景標尺/圖形的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; 

} 

//]]>

當我們拖放時組件會重疊。雖然我在現有組件旁邊拖動新組件，但組件不是並排放置的。如何達到這些標準。

來源

2013-12-11 user3069111

你能解釋你想做什麼嗎？這不是很清楚。你拖動一個元素，當你放下它時，你想知道鼠標的位置？ – Makhiel

首先，我需要獲取被拖動的組件位置，而不是鼠標位置。我能夠得到這個使用JavaScript片段，我已經在上面添加。但問題是我無法將組件放置在屏幕的任何位置。目前，無論我拖動組件，它們都垂直放置，即1個在另一個下面。 – user3069111

所以你想拖動組件，當你放下它時，你希望它保持在現場，它被丟棄了？ – Makhiel

的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方法並使用參數作爲參數。

來源

2013-12-12 11:06:40 Makhiel

如何實現使用具有背景標尺/圖形的richfaces拖放組件以獲得確切的座標

回答

相關問題