0

コンテキスト:私は Xpages (8.5.3)、Dojo、および JS にかなり慣れていないので、wysiwyg テンプレート エディターを作成したいと考えています。ユーザーはアイテム (フィールドを表す画像、日付ピッカーなど) をドラッグ アンド ドロップできます。保存ボタンを押すと、これらのアイテムの位置が保存されます。

以下の簡単なページは、パネルを移動可能にする方法を示しています。

<?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 オプションを使用してカスタム Mover を作成する方法を説明している dojo ドキュメントでこのページを見つけましたが、Xpages でそれを実装する方法がわかりません。

手伝って頂けますか ？

4

3 に答える 3

0

dojox.layout.GridContainerとを使用することをお勧めしますdojox.widget.Portlet。それらは、グリッドにスナップするためのすぐに使える機能を提供しました。

基本的に、グリッドに必要なセルの数、ドラッグできるポートレット、ドラッグできないポートレットなどを追加dojox.widget.Portletして指定します。dojox.layout.GridContainer

Grid Container のポートレットの例は、ここにあります。

dojoTypeXPage に組み込むことは、必要な dojo モジュールをリソースにインポートし、属性を使用することでそれほど難しくないはずです (これは、例で既に行っています)。

于 2013-11-08T05:34:28.957 に答える