Gridview拖放（不重新排序） [英] Gridview drag-and-drop (not reordering)
问题描述
情况：
我有一个表格，我希望向用户提供一周的时间表。我选择了 GridView 这样做，每天的列和小时的行;每小时由4个代表季度的图像显示。在服务器端创建24行，并在基于数据库的单元格中填充各种四分之一图像。
欲望：
我希望用户通过拖放来指示时间间隔。为了防止回发，我使用 javaScript ;修改后的网格数据将在稍后通过保存按钮回发。
问题：
一旦我开始拖动，所有其他图像都显示为不允许作为拖动目标（禁止停车标志），并且当我没有触发 MouseUp 事件时释放鼠标。
拖动到完全相同的图像是唯一允许的拖动目标（ MouseUp fires）。拖动到 GridView 之外也不起作用（全局 MouseUp 事件未被触发），但是从外部拖动 GridView 它也可以工作（对象 MouseUp 和全局 MouseUp 都解雇了）。
额外信息：
我用 CanReorderItems =false尝试了这个也没有变化。各种功能仅包含测试警报。 GridView 代码如下。
我做错了什么？ CanDragItems 显然不足以允许在网格中拖动？
< asp：GridView < span class =code-attribute> ID = gvWeekschema runat = server AutoGenerateColumns = False
AllowPaging = True PageSize = 1000
OnDataBound = Weekschema_DataBound
OnDataBinding = Weekschema_DataBinding
OnRowDataBound = Weekschema_RowDataBound
AllowDrop = True
< span class =code-attribute> CanDragItems = True
CanReorderItems < span class =code-keyword> = True
OnPreRender = Weekschema_PreRender
字体大小 = 较小的 字体名称 = Arial ShowFooter = true >
< 列 >
< asp：BoundField DataField = 时间 HeaderText = Tijd
ReadOnly = True >
< / asp：BoundField >
< asp：TemplateField HeaderText = Ma >
< ItemTemplate >
< asp：Image ID = dg0000 runat = server ImageUrl = images / KwartierNiks.jpg onclick = test（this） onmousedown = OnMouseDown（this） onmouseup = OnMouseUp（this） AllowDrop = True / > < br / >
< asp：图片 ID = dg0001 runat = server ImageUrl = images / KwartierNiks.jpg onclick = test（这个） onmousedown = OnMouseDown（this） onmouseup = OnMouseUp（this） < span class =code-attribute> AllowDrop = True / > < br / >
< asp：Im年龄 ID = dg0002 runat = server ImageUrl = images / KwartierNiks.jpg onclick = test（this ） onmousedown = OnMouseDown（this） onmouseup < span class =code-keyword> = OnMouseUp（this） AllowDrop = True / > < br / >
< asp：Image ID = dg0003 runat = 服务器 ImageUrl = images / KwartierNiks.jpg onclick = test（this） onmousedown = OnMouseDown（this） onmouseup = OnMouseUp（this） AllowDrop = True / > < br / >
< / ItemTemplate >
< ControlStyle Font-Bold = True 宽度 = 100px / >
< < span class =code-leadattribute> / asp：TemplateField >
< asp：TemplateField HeaderText < span class =code-keyword> = Di >
< ItemTemplate >
< asp：图像 ID = dg0100 runat = server < span class =code-attribute> ImageUrl = images / KwartierNiks.jpg onclick = test（this） onmousedown = OnMouseDown（this） onmouseup = OnMouseUp（this） / > < br / >
< asp：Image ID = dg0101 runat = server ImageUrl = images / KwartierNiks.jpg onclick = test（this） onmousedown = OnMouseDown（this） onmouseup = OnMouseUp（this） / > < br / >
< as p：图像 ID = dg0102 runat = 服务器 ImageUrl = images / KwartierNiks.jpg onclick = test （this） onmousedown = OnMouseDown（this） onmouseup = OnMouseUp（this） / > < br / >
< asp：Image ID = dg0103 runat = < span class =code-keyword> server ImageUrl = images / KwartierNiks.jpg onclick = test（th is） onmousedown = OnMouseDown（this） onmouseup = OnMouseUp（this） / > < br / >
< / ItemTemplate >
< ControlStyle 字体粗体 = True 宽度 = 100px / >
< / asp： TemplateField >
（星期三到星期日还有一些模板字段）
< / columns >
< / asp：GridView >
有一些全球JS似乎与它没有任何关系，我仍然将它发布为完成：
document .onmouseup = OnMouseUpAnywhere;
document .onmousemove = OnMouseMove;
var DragObject = null ;
// 预加载图片
var kwartierNiks = new Image（）; kwartierNiks.src = images / KwartierNiks.jpg;
var kwartierStd = new Image（）; kwartierStd.src = images / KwartierStd.jpg;
var kwartierSpc = new Image（）; kwartierSpc.src = images / KwartierSpc.jpg;
var kwartierWrk = new Image（）; kwartierWrk.src = images / KwartierWrk.jpg;
function mouseMove（ev）{
ev = ev || window .event;
var mousePos = mouseCoords（ev）;
if （dragObject）{
dragObject.style.position = ' 绝对;
dragObject.style.top = mousePos.y - mouseOffset.y;
dragObject.style.left = mousePos.x - mouseOffset.x;
return false ;
}
}
function test（obj）{
obj.src = kwartierWrk.src;
}
function OnMouseDown（obj）{
DragObject = obj;
return false ;
// alert（'开始拖动：'）;
// alert（obj.parentElement.cellIndex）;
// alert（obj.parentElement.parentElement.rowIndex）;
}
函数 OnMouseUp（obj）{
alert（' 结束拖动：'） ;
alert（obj.parentElement.cellIndex）;
alert（obj.parentElement.parentElement.rowIndex）;
}
function OnMouseUpAnywhere（obj）{
DragObject = null ;
alert（' 在任何地方结束拖动：'）;
}
设置CanReorderItems =false
它会解决你的问题试试这个
Situation:
I have a form where I want to present the user with a week schedule. I have chosen a GridView to do so, with columns for each day and rows for the hours; each hour is shown by 4 images that represent quarters. 24 rows are created server-side, and populated with various quarter images in the cells based on a database.
Desire:
I want the user to indicate time intervals by drag and drop. To prevent postbacks, I'm using javaScript; the modified grid data will be posted back by a "Save" button later.
Problem:
As soon as I start the dragging, all other images are indicated as "not allowed" as dragging targets (the "no parking" sign), and the MouseUp event isn't fired when I release the mouse.
Dragging to exactly the same image is the only allowed drag target (MouseUp fires). Dragging to outside the GridView doesn't work either (global MouseUp event isn't fired), but dragging from outside the GridView unto it works too (object MouseUp and global MouseUp both fired).
Extra info:
I've tried this with CanReorderItems="false" too, nothing changes. The various functions contain only alerts for testing. GridView code is below.
What am I doing wrong? CanDragItems is apparently not enough to allowing dragging within the grid?
<asp:GridView ID="gvWeekschema" runat="server" AutoGenerateColumns="False"
AllowPaging="True" PageSize="1000"
OnDataBound="Weekschema_DataBound"
OnDataBinding="Weekschema_DataBinding"
OnRowDataBound="Weekschema_RowDataBound"
AllowDrop="True"
CanDragItems="True"
CanReorderItems="True"
OnPreRender="Weekschema_PreRender"
Font-Size="Smaller" Font-Names="Arial" ShowFooter="true">
<Columns>
<asp:BoundField DataField="Time" HeaderText="Tijd"
ReadOnly="True" >
</asp:BoundField>
<asp:TemplateField HeaderText="Ma ">
<ItemTemplate>
<asp:Image ID="dg0000" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)" AllowDrop="True"/><br />
<asp:Image ID="dg0001" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)" AllowDrop="True"/><br />
<asp:Image ID="dg0002" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)" AllowDrop="True"/><br />
<asp:Image ID="dg0003" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)" AllowDrop="True"/><br />
</ItemTemplate>
<ControlStyle Font-Bold="True" Width="100px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Di ">
<ItemTemplate>
<asp:Image ID="dg0100" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)"/><br />
<asp:Image ID="dg0101" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)"/><br />
<asp:Image ID="dg0102" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)"/><br />
<asp:Image ID="dg0103" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)"/><br />
</ItemTemplate>
<ControlStyle Font-Bold="True" Width="100px" />
</asp:TemplateField>
(some more templatefields for wednesday to sunday)
</columns>
</asp:GridView>
There's some global JS that doesn't seem to have anything to do with it, still I'm posting it to be complete:
document.onmouseup = OnMouseUpAnywhere;
document.onmousemove = OnMouseMove;
var DragObject = null;
//Preload images
var kwartierNiks = new Image(); kwartierNiks.src = "images/KwartierNiks.jpg";
var kwartierStd = new Image(); kwartierStd.src = "images/KwartierStd.jpg";
var kwartierSpc = new Image(); kwartierSpc.src = "images/KwartierSpc.jpg";
var kwartierWrk = new Image(); kwartierWrk.src = "images/KwartierWrk.jpg";
function mouseMove(ev) {
ev = ev || window.event;
var mousePos = mouseCoords(ev);
if (dragObject) {
dragObject.style.position = 'absolute';
dragObject.style.top = mousePos.y - mouseOffset.y;
dragObject.style.left = mousePos.x - mouseOffset.x;
return false;
}
}
function test(obj) {
obj.src = kwartierWrk.src;
}
function OnMouseDown(obj) {
DragObject = obj;
return false;
// alert('Starting drag:');
// alert(obj.parentElement.cellIndex);
// alert(obj.parentElement.parentElement.rowIndex);
}
function OnMouseUp(obj) {
alert('Ending drag:');
alert(obj.parentElement.cellIndex);
alert(obj.parentElement.parentElement.rowIndex);
}
function OnMouseUpAnywhere(obj) {
DragObject = null;
alert('Ending drag anywhere:');
}set CanReorderItems="false"
it will solve your problem try this
这篇关于Gridview拖放（不重新排序）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
