82 lines
3.4 KiB
Plaintext
82 lines
3.4 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="range2.aspx.cs" Inherits="admin_item_range2" %>
|
|
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
|
|
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head runat="server">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title></title>
|
|
<link href="~/js/bootstrap5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
<style>
|
|
.list-group-item.bg-light:hover{
|
|
cursor:pointer;
|
|
background-color: rgba(var(--bs-light-rgb),0)!important
|
|
}
|
|
|
|
/* 修正 ReorderList 拖拽問題 */
|
|
.list-group li {
|
|
position: relative !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* 確保拖拽視覺元素使用整數座標 */
|
|
.ajax__reorderList_dragVisual {
|
|
position: absolute !important;
|
|
transform: none !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form id="form1" runat="server">
|
|
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
|
|
<div>
|
|
<asp:SqlDataSource ID="sqlDataSource1" runat="server"
|
|
SelectCommand="SELECT [num], [title], [range] FROM [item] WHERE root=0 ORDER BY [range]"
|
|
UpdateCommand="UPDATE [item] SET [title] = @title, [range] = @range WHERE [num] = @num">
|
|
<UpdateParameters>
|
|
<asp:Parameter Name="title" Type="String" />
|
|
<asp:Parameter Name="range" Type="Int32" />
|
|
<asp:Parameter Name="num" Type="Int32" />
|
|
</UpdateParameters>
|
|
</asp:SqlDataSource>
|
|
|
|
<asp:UpdatePanel ID="up1" runat="server">
|
|
<ContentTemplate>
|
|
<cc1:ReorderList ID="ReorderList1" runat="server" CssClass="list-group"
|
|
AllowReorder="True" DataKeyField="num" DataSourceID="sqlDataSource1" PostBackOnReorder="False" SortOrderField="range" EnableTheming="False">
|
|
<ItemTemplate>
|
|
<%#Eval("title")%>
|
|
</ItemTemplate>
|
|
</cc1:ReorderList>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</form>
|
|
<script>
|
|
// 確保 ReorderList 的樣式正確應用
|
|
Sys.Application.add_load(function() {
|
|
var reorderList = document.querySelector('.list-group');
|
|
if (reorderList) {
|
|
reorderList.className = "list-group";
|
|
}
|
|
|
|
// 為 ReorderList 生成的 li 元素添加 CSS 類別
|
|
var listItems = document.querySelectorAll('.list-group li');
|
|
listItems.forEach(function(item) {
|
|
item.className = "list-group-item bg-light";
|
|
});
|
|
});
|
|
|
|
// 修正拖拽座標問題
|
|
if (typeof Sys !== 'undefined' && Sys.Extended && Sys.Extended.UI && Sys.Extended.UI.DragDropWatcher) {
|
|
var originalSetLocation = Sys.Extended.UI._CommonToolkitScripts.setLocation;
|
|
Sys.Extended.UI._CommonToolkitScripts.setLocation = function(element, x, y) {
|
|
// 確保座標是整數
|
|
var intX = Math.round(x);
|
|
var intY = Math.round(y);
|
|
return originalSetLocation.call(this, element, intX, intY);
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|