Javascript 在asp.net中，将项目从一个列表框拖放到另一个列表框

嗨，我想在我的表单中使用jquery UI的拖放功能。我绑定数据库中的第一个lisbox项。我想要的是将项目从列表1拖动到列表2。我尝试了下面的代码来实现它，但没有实现。请帮我克服这个问题

<script type="text/javascript">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  $(function () {
        $("#list1, #list2").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });
</script>

   <style>
      #list1, #list2 {
      border: 1px solid #eee;
      width: 142px;
      min-height: 20px;
      list-style-type: none;
      margin: 0;
     padding: 5px 0 0 0;
     float: left;
     margin-right: 10px;
    }

   #list1li, #list2 li {
   margin: 0 5px 5px 5px;
   padding: 5px;
   font-size: 1.2em;
   width: 120px;
   }

---

呈现HTML时，ASP.NET可能会更改列表框的ID。你有两个选择

要么修改javascript。注意：如果您最终将javascript移动到一个外部文件，这将不起作用

  $(function () {
        $("#<%= list1.ClientID %>, # <%= list2.ClientID %>").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });

或者在ListBox上设置以下属性：ClientIDMode=static，如下所示：

<asp:ListBox ID="list1" runat="server" ClientIDMode="Static" Height="300px" Width="250px" class="connectedSortable"></asp:ListBox>

---

这将强制ASP.NET按照您在服务器控件中定义的方式设置ID

使用系统集合

暗藏

ArrayList ArrayList 1=新的ArrayList

ArrayList ArrayList 2=新的ArrayList

受保护的无效页\u加载对象发送方，事件参数e

{

}

// btn1_单击事件用于将单个或多个项目从Listbox1移动到Listbox2

受保护的无效btn1\u Clickobject发送者，事件参数e

{

}

//btn2_单击事件用于将所有项目从Listbox1移动到Listbox2

受保护的无效btn2\u单击对象发送者，事件参数e

{

}

//btn3\u单击事件用于将单个或多个项目从Listbox2移动到Listbox1

受保护的无效btn3\u单击对象发送者，事件参数e

{

}

//btn4\u单击事件用于将所有项目从Listbox2移动到Listbox1

受保护的无效btn4\u单击对象发送者，事件参数e

{

}

  $(function () {
        $("#<%= list1.ClientID %>, # <%= list2.ClientID %>").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });

<asp:ListBox ID="list1" runat="server" ClientIDMode="Static" Height="300px" Width="250px" class="connectedSortable"></asp:ListBox>

lbltxt.Visible = false;

if (ListBox1.SelectedIndex >= 0)

{

    for (int i = 0; i < ListBox1.Items.Count; i++)

    {
        if (ListBox1.Items[i].Selected)
        {
            if (!arraylist1.Contains(ListBox1.Items[i]))
            {
                arraylist1.Add(ListBox1.Items[i]);
            }
        }
    }
    for (int i = 0; i < arraylist1.Count; i++)
    {
        if (!ListBox2.Items.Contains(((ListItem)arraylist1[i])))
        {
            ListBox2.Items.Add(((ListItem)arraylist1[i]));
        }
        ListBox1.Items.Remove(((ListItem)arraylist1[i]));
    }
    ListBox2.SelectedIndex = -1;
}
else
{
    lbltxt.Visible = true;
    lbltxt.Text = "Please select atleast one in Listbox1 to move";
}

lbltxt.Visible = false;
while(ListBox1.Items.Count!=0)
{
    for(int i=0;i<ListBox1.Items.Count;i++)
    {
        ListBox2.Items.Add(ListBox1.Items[i]);
        ListBox1.Items.Remove(ListBox1.Items[i]);
    }
}

lbltxt.Visible = false;
if (ListBox2.SelectedIndex >= 0)
{
    for (int i = 0; i < ListBox2.Items.Count; i++)
    {
        if (ListBox2.Items[i].Selected)
        {
            if (!arraylist2.Contains(ListBox2.Items[i]))
            {
                arraylist2.Add(ListBox2.Items[i]);
            }
        }
    }
    for (int i = 0; i < arraylist2.Count; i++)
    {
        if (!ListBox1.Items.Contains(((ListItem)arraylist2[i])))
        {
            ListBox1.Items.Add(((ListItem)arraylist2[i]));
        }
        ListBox2.Items.Remove(((ListItem)arraylist2[i]));
    }
    ListBox1.SelectedIndex = -1;
}
else
{
    lbltxt.Visible = true;
    lbltxt.Text = "Please select atleast one in Listbox2 to move";
}

lbltxt.Visible = false;
while (ListBox2.Items.Count != 0)
{
    for (int i = 0; i < ListBox2.Items.Count; i++)
    {
        ListBox1.Items.Add(ListBox2.Items[i]);
        ListBox2.Items.Remove(ListBox2.Items[i]);
    }
}