0

我在一个 div“style=display:table”中有两个 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

任何想法，muchas grazias 和 danke 寻求任何帮助。

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>

花了我三天......三天！

于 2013-06-11T14:36:33.663 回答