方法：JQueryUI
ListBox:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Sortable - Connect lists</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function () { $("#sortable1, #sortable2").sortable({ connectWith: ".connectedSortable" }).disableSelection(); }); </script> </head> <body> <ul id="sortable1" class="connectedSortable" style="overflow: scroll; height: 200px; 150px;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> <ul id="sortable2" class="connectedSortable" style="overflow: scroll; height: 200px; 150px;"> <li>Item A</li> <li>Item B</li> <li>Item C</li> <li>Item D</li> <li>Item E</li> </ul> </body> </html>
ListView:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="How_to_drag_and_drop.WebForm2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function () { $("#List1,#List2").sortable({ connectWith: ".sortable" }).selectable(); }); </script> <style> .list li { list-style-type: none } </style> </head> <body> <form id="form1" runat="server"> <table> <tr> <td> <asp:ListView ID="ListView1" runat="server"> <LayoutTemplate> <ul class="sortable list" draggable="true" id="List1" style="overflow: scroll; empty-cells: hide; height: 200px; 150px; border: solid 1px;"> <asp:PlaceHolder ID="PlaceHolder1" id-="itemPlaceholder" runat="server"></asp:PlaceHolder> </ul> </LayoutTemplate> <ItemTemplate> <li id="li1" runat="server"> <%# Eval("Model")%> <%# Eval("Price")%> <p>TestTestTest</p> </li> </ItemTemplate> </asp:ListView> </td> <td> <ul class="sortable list" draggable="true" id="List2" style="overflow: scroll; height: 200px; 150px; border: solid 1px;"> </ul> </td> </tr> </table> </form> </body> </html>
后台代码：
protected void Page_Load(object sender, EventArgs e) { SqlConnection con = new SqlConnection(@"Connection String"); SqlDataAdapter sda = new SqlDataAdapter("select * from Car",con); DataTable dt = new DataTable(); sda.Fill(dt); ListView1.DataSource = dt; ListView1.DataBind(); }
