从后面的代码中获取可排序列中掉落项目的值

Question

我已经在我的网页上实现了拖放 jquery，并且运行良好。我正在根据用户选择从后面的代码加载列，用户可以根据他们的需要编辑这些列。但是，当我尝试在目标列中选择项目时，其 repeater.items 计数为零，源 repeater.items 计数与页面加载时的计数相同。这是代码。

<div class="Content" id="DragAndDrop" style="width: 100%; display: flex; justify-content: center; font-size: 9px;">
                    <ul id="sortable1" class="connectedSortable" style="width: 45%; border: groove">
                        <asp:Repeater ID="DivisionSource" runat="server">
                            <ItemTemplate>
                                <%--<li class="ui-state-default" id="lblSource" ><%# Eval("DivisionName") %></li>--%>
                                <li class="ui-state-default" >
                                     <asp:Label id="lblSource" runat="server" Text='<%# Eval("DivisionName") %>' ></asp:Label> </li>
                            </ItemTemplate>
                        </asp:Repeater>
                    </ul>
                    <ul id="sortable2" class="connectedSortable" style="width: 45%; border: groove; list-style: none">
                        <asp:Repeater ID="DivisionDest" runat="server" >
                            <ItemTemplate>
                                 <li class="ui-state-default" >
                                     <asp:Label id="lblDest" runat="server" Text='<%# Eval("DivisionName") %>' ></asp:Label> </li>
                               <%-- <li class="ui-state-default" id="<%# Eval("DivisionID") %>" style="display: none;">SAP: Strategizing Activities and Practices</li>--%>
                            </ItemTemplate>
                        </asp:Repeater>
                    </ul>
                </div>

数据受 pageload() 上的 repeter databound 限制

DivisionSource.DataSource = DivResultSource
                DivisionSource.DataBind()

                DivisionDest.DataSource = DivResultDest
                DivisionDest.DataBind()

访问数据的隐藏代码：

Dim DivisionSource As Repeater = Wizard1.FindControl("DivisionSource")
Dim DivisionDest As Repeater = Wizard1.FindControl("DivisionDest")    
Dim SelectedDivisionvalue As String = Nothing
                                Dim i As Integer = 1
                                For Each item As RepeaterItem In DivisionDest.Items
                                    If (item.ItemType = ListItemType.Item) Then


                                        Dim lblValue As Label = CType(item.FindControl("lblDest"), Label)
                                        SelectedDivisionvalue = lblValue.Text 
                                        i += 1
                                    End If
                                Next

回发时，DivisionSource.items 计数与页面加载时的默认值相同，DivisionDest.items 计数为 0。

Answer 1

您尝试在客户端通过拖放添加服务器端控件。服务器控件在服务器端呈现，您无法按照自己的方式进行操作。因此，控件会添加到浏览器（客户端）中的转发器，但当页面 post 支持 DivisionSource.items 计数与默认值相同时，它们不可用。

If you want to do it, you can use hidden field or session.

Answer 2

我最终做的是能够从 javascrip 函数中获取源和目标中继器的顺序。我将订单值保存在隐藏变量中并将其传递给后面的代码。这是我获得订单的方式。

$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
  receive: function (event, ui) {
       // alert('Receive!');

       var $self = $(this);
       var $item = ui.item;
       var $sender = ui.sender;
        if ($(event.target).attr("id") == "sortable2") {

            var order1 = $sender.sortable('toArray').toString();
            var order2 = $self.sortable('toArray').toString();

           //alert("Order 1:" + order1 + "\n Order 2:" + order2);
            }
         },
}).disableSelection();

这个

var order2 = $self.sortable('toArray')

会在 arrayList 中给你排序，你可以做 .lenght 和其他函数来计算项目的数量，如果你想限制用户的限制。

从后面的代码中获取可排序列中掉落项目的值

Get values of dropped items in sortable comuns from code behind

vb.net

asp.net

jquery

jquery-ui

jquery-ui-draggable