Question

上下文：我是Xpages（8.5.3），Dojo和JS的新手，我想创建一个所见即所得的模板编辑器：用户可以拖放项目（代表字段的图像），datepickers，...）页面上的任何位置，当他们点击保存按钮时，这些项目的位置将被保存。

下面的简单页面显示了我如何使面板可移动。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view id="xp01" xmlns:xp="http://www.ibm.com/xsp/core"
    dojoTheme="true" dojoParseOnLoad="true"
    xmlns:xc="http://www.ibm.com/xsp/custom" styleClass="claro">
    <xp:this.resources>
        <xp:dojoModule name="dojo.dojo"></xp:dojoModule>
        <xp:dojoModule name="dojo.dnd.Source"></xp:dojoModule>
        <xp:dojoModule name="dojo.dnd.Moveable"></xp:dojoModule>
    </xp:this.resources>

    <xp:table id="dndSourceTable" border="1">
        <xp:tr>
            <xp:td id="ds1" dojoType="dojo.dnd.Source"
                style="color:red;"> THIS IS THE BOX
                <xp:panel id="mov1"
                    style="height:32.0px;width:160.0px; margin:0px;background-color:rgb(192,192,192)"
                    dojoType="dojo.dnd.Moveable">THIS IS MOVEABLE 
                </xp:panel>
            </xp:td>
        </xp:tr>
    </xp:table>
</xp:view>

上面的代码有效，但我想让面板Snap to Grid。我在dojo文档中找到了this page，它解释了如何使用Snap to Grid选项创建自定义Mover，但我无法弄清楚如何在Xpages中实现它。

你能帮助我吗？

Answer 1

这是我自己的解决方案，基于Naveen建议使用jQuery。

问题：Dojo没有真正的对齐网格功能，或者没有正确记录。使用jQuery要容易得多。这是一个非常简单的例子。

对于像我这样的初学者：Domino不提供jQuery / jQuery UI，但在Notes数据库（* .nfs）中添加它们非常简单。这意味着如果移动它们，它们将与数据库一起移动。

从http://jqueryui.com/下载jQuery UI （jQuery incl。）。我选择了整个软件包，但我估计你可以选择“核心”和“交互”。您最终会得到一个zip文件。
在数据库中包含jQUery / jQueryUI ：
- 在Domino Designer中，单击“Window - Open Perspective＆gt; - Xpages”。此透视图（= workspace）在Designer的左侧具有“Package Explorer”选项卡。
- 使用Package Explorer导航到数据库的“WebContent”文件夹。
- 将zip文件中的'css'文件夹和'js'文件夹拖放到'WebContent'中。
在您的Xpage中包含jQuery / jQueryUI 。只需在源代码中添加此代码（jQuery / jQueryUI文件的名称可能不同）

<xp:this.resources> <xp:script src="js/jquery-1.9.1.js" clientSide="true"></xp:script> <xp:script src="js/jquery-ui-1.10.3.custom.js" clientSide="true"> </xp:script> </xp:this.resources> <script> XSP.addOnLoad(function(){ $("[id='view:_id1:MyPan01']").draggable({ grid: [ 80, 80 ] }); }) </script>

这使得名为“MyPan01”的Panel可以拖动并捕捉80 * 80网格。

以下是我的页面的完整代码。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom">
        <xp:this.resources>
    <xp:script src="js/jquery-1.9.1.js" clientSide="true"></xp:script>
    <xp:script src="js/jquery-ui-1.10.3.custom.js" clientSide="true">
    </xp:script>
</xp:this.resources>
    <xp:br></xp:br>
    Intro
    <xp:br></xp:br>
    <xp:panel id="MyPan01"
        style="height:120px;width:120px;background-color:rgb(255,128,192)">
    </xp:panel>
    <xp:br></xp:br>
    Outro
    <xp:br></xp:br>
    <script>
 XSP.addOnLoad(function(){
  $("[id='view:_id1:MyPan01']").draggable({ grid: [ 80, 80 ] });
  })
  </script>
    </xp:view>

从那里，你可以探索和适应。再次感谢Naveen的提示！

Answer 2

我建议您使用dojox.layout.GridContainer和dojox.widget.Portlet。它们提供了即用型网格功能。

基本上你在dojox.widget.Portlet中添加dojox.layout.GridContainer并指定网格中需要多少个单元格，哪些portlet可以拖动，哪些不能等等。

可以在 here 中找到网格容器中的Portlet示例。

在您的资源中导入必要的dojo模块并使用dojoType属性（在您的示例中已经完成），将其合并到您的XPage中并不困难。

Answer 3

dojo可移动类支持几个事件（onMoveStart，onMoveStop，...），因为您可以在文档中查看。我使用“onMove”在移动操作上实现对齐网格。

怎么样？

下面的代码假设您已经拥有了dojo类Moveable的myMoveable对象，假设gridPattern是一个javascript变量，其整数值对应于您想要的网格间距，并且还假设您正在使用dojo“on”模块而不是旧的“连接”模块（推荐用于dojo 1.7及以上版本）。请记住，使用新的“on”模块，事件名称将丢失“on”前缀（在pre dojo 1.7版本中记录）：“onStart”变为“Start”，依此类推。应用相同的规则，“onMove”变为“Move”（我们的移动处理程序中的第二个参数）。

myMoveHandler=on(myMoveable, "Move", function (mover,leftTop,e){//called at every move step
    this.onMoving(mover, leftTop);
    var s = mover.node.style;
    s.left = snapToGrid(leftTop.l,gridPattern) + "px";
    s.top  = snapToGrid(leftTop.t,gridPattern) + "px";
    this.onMoved(mover, leftTop);
});

snapToGrid是一个简单的函数，对于给定的坐标，gridPattern根据该网格图案返回相同的坐标。

snapToGrid=function(xVal,gridPattern){ 
    var xMod=xVal%gridPattern;
    if(xMod==0) //no transform
       return(xVal);
    if(xMod<gridPattern/2) //snap no number below
       return(xVal-xMod);
    return(xVal+(gridPattern-xMod));
};

Xpages中的dojo.dnd.Moveable节点的“对齐网格”行为

3 个答案: