0

div "style=display:table" に 2 つの asp:BulletedList があります。アイデアは、ユーザーが選択した項目の別のリストを作成するためにそれらの間でドラッグ アンド ドロップできる asp:ListItems を含むことです。

これがコードです

<div style="width:90%; display:table; border:1px solid green">
    <div style="width:100%; display:table-row">
        <div style="width:35%; display:table-cell; border:1px solid gray">
            <asp:BulletedList runat="server" ID="blAvailableDocuments" Height="150px" BorderStyle="Solid" BorderWidth="1px" BorderColor="red">
                <asp:ListItem Text="AvailableLI1">
                </asp:ListItem>
                <asp:ListItem Text="AvailableLI2">
                </asp:ListItem>
            </asp:BulletedList>
        </div>
        <div style="width:30%; display:table-cell; text-align:center">
            <asp:Button runat="server" Text=">>" ID="btnAddAll" OnClientClick="AddAll(); return false" /><br /><br />
            <asp:Button runat="server" Text="<<" ID="btnRemoveAll" OnClientClick="RemoveAll(); return false" />
        </div>
        <div style="width:35%; display:table-cell; border:1px solid gray">
            <asp:BulletedList runat="server" ID="blSelectedDocuments" Height="150px" BorderStyle="Solid" BorderWidth="1px" BorderColor="Gray">
                <asp:ListItem Text="SelectedLI1">
                </asp:ListItem>
                <asp:ListItem Text="SelectedLI2">
                </asp:ListItem>
            </asp:BulletedList>
        </div>
    </div>
</div>

シンプルですよね？ここには、各リスト内での並べ替えとそれらの間でのドラッグ アンド ドロップを可能にするこの JQuery もあります。

    $(function ()
    {
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").sortable();
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").disableSelection();

        $("#ctl00_PlaceHolderMain_blSelectedDocuments").sortable();
        $("#ctl00_PlaceHolderMain_blSelectedDocuments").disableSelection();
    });

    $(function ()
    {
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").draggable({
            drag: function (event, ui)
            {
                if (ui.draggable[0].hasAttribute("ID"))
                {
                    return;
                }
            }
        });
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").droppable({
            drop: function (event, ui)
            {
                var source = ui.draggable[0].parentElement.id;
                var target = event.target.id;

                if (source != target)
                {
                    Move(ui.draggable[0], source, target);
                }
            }
        });

        $("#ctl00_PlaceHolderMain_blSelectedDocuments").draggable({
            drag: function (event, ui)
            {
                if (ui.draggable[0].hasAttribute("ID"))
                {
                    return;
                }
            }
        });
        $("#ctl00_PlaceHolderMain_blSelectedDocuments").droppable({
            drop: function (event, ui)
            {
                var source = ui.draggable[0].parentElement.id;
                var target = event.target.id;

                if (source != target)
                {
                    Move(ui.draggable[0], source, target);
                }
            }
        });
    });

    function Move(element, from, to)
    {
        var fromBL = document.getElementById(from);
        var toBL = document.getElementById(to);
        var newLI = document.createElement("li");
        newLI.innerHTML = element.innerHTML;
        fromBL.removeChild(element);
        toBL.appendChild(newLI);
    }

要素に ID があるかどうかの条件は、リスト自体のドラッグを停止することです。エラーだと思いますが、これは必要なことですが、参考までに問題はそれなしで発生します。

（まだここに写真を投稿することはできません....理由があります）

https://fbcdn-sphotos-ga.akamaihd.net/hphotos-ak-ash3/946310_10151467867553519_1667792056_n.jpg

ドラッグ アンド ドロップは別として正常に動作します... BulletedLists のいずれかに残りの ListItems がないようにドラッグ アンド ドロップすると、これが発生します。

https://fbcdn-sphotos-ca.akamaihd.net/hphotos-ak-prn1/945900_10151467867548519_1597804249_n.jpg

どんなアイデアでも、どんな助けでもあります。

4

1 に答える 1

0

答えがいかに単純で、それ以上に誰にも教えてもらえなかったことは、非常に腹立たしいことです。

display:table/row/cell の代わりに、float:left、float:right、そして margin:auto を中央に使用しました

    <div style="width:35%; border:1px solid gray; float:left">
        <asp:BulletedList runat="server" ID="blAvailableDocuments" RenderWhenDataEmpty="true" Height="150px">
        </asp:BulletedList>
    </div>
    <div style="width:35%; border:1px solid gray; float:right">
        <asp:BulletedList runat="server" ID="blSelectedDocuments" RenderWhenDataEmpty="true" Height="150px">
        </asp:BulletedList>
    </div>
    <div style="width:30%; text-align:center; margin:auto">
        <asp:Button runat="server" Text=">>" ID="btnAddAll" OnClientClick="AddAll(); return false" UseSubmitBehavior="false" /><br /><br />
        <asp:Button runat="server" Text="<<" ID="btnRemoveAll" OnClientClick="RemoveAll(); return false" UseSubmitBehavior="false" />
    </div>

私にかかった3日.... 3日!!!

于 2013-06-11T14:36:33.663 に答える