在WebForm上进行拖拽

简介:

代码:/Files/zhuqil/DragAndDrop.rar(C#)

1、使用access数据库


2、使用SQL对DB进行Insert, update, delete 和read


3、使用javascript在一个web页面拖拽textbox


4、在页面和数据库中对textbox进行add, move和delete 
    首先我们必须创建处理事件的javascript代码,这些事件是drag, mouse down 和 mouse up。我在网上找到了鼠标的拖拽事件处理的代码:

代码

     函数在屏幕上通过计算x和y的值来拖动对象。在网上还有很多其它类似的代码,但是我发现这种方式是非常容易使用的。下一个是mouse down脚本,WhitchElement在这里被调用,我在网上找到它,但是我修改它来满足自己的需要。

代码

     这段脚本能侦查哪个控件被点击,传递给我们这个控件的ID。我们要做的是将这个ID传给命名为id的textbox控件,每次控件被点击我们就添加一个新的ID,每个ID之间的用空格分开。
     最后完成mouse up脚本,我承认我不擅长javascript,但是我还是能理解drag 脚本的。

代码

       当控件拖动到合适的位置,放开鼠标,此脚本检测控件的x 和 y 坐标的值。这时我们传递x 和 y 值到一个名字为xpos的textbox和ypos的textbox。每次控件被点击的时候,我们添加新的x和y的位置给textbox,在x和y值之间留一个空格。
    上面是javascript脚本的部分。其余部分是在数据库中存储控件的位置。在每次回发之间检索控件的位置,让用户不能看见回发,我必须使用ajax。最重要的是Page_LoadComplete处理。

代码

     我们在这里做的是,网站每次回发的时候,我们读取数据库。在运行时创建控件。在数据库中,控件的ID对应数据库的id字段。控件的Text对应数据库的Name字段,然后我们设置属性的样式。最重要的样式属性是position: absolute,添加我们拖动拖动属性,onmousedown 和 onmouseup。将textbox添加到页面的位置和数据库中存储的位置一致。

    剩余的代码是常见的SQL的read, insert, update 和delete操作。我们使用JavaScript 传递id, x 和 y的值给textbox。分割textbox的文本,使用SQL的update 和delete命令将他们更新到到数据库中。

    这个程序目前只能在IE中运行,不能在FireFox运行,我也没有在其它浏览器中测试过。有兴趣朋友可以一起完善它。

 参考原文:http://www.codeproject.com/KB/vb/drag_and_drop_web.aspx







本文转自麒麟博客园博客,原文链接:http://www.cnblogs.com/zhuqil/archive/2010/01/13/1646413.html,如需转载请自行联系原作者

相关文章
|
C# 索引 Windows
Winform控件优化之TabControl控件的使用和常用功能
TabControl是一个分页切换(tab)控件,不同的页框内可以呈现不同的内容,将主要介绍调整tab的左右侧显示、设置多行tab、禁用或删除tabpage、隐藏TabControl头部的选项卡等
5063 0
Winform控件优化之TabControl控件的使用和常用功能
|
机器学习/深度学习 数据可视化 程序员
WinForm控件属性大全
WinForm控件属性大全
443 0
|
C#
WPF 控件库——轮播控件
原文:WPF 控件库——轮播控件 一、要做成什么样   bs端的轮播控件千千万,有的甚至能作为一个单独的库来开发,所涉及到的功能也是缤纷多彩。相对来说,cs端的轮播用得不多,我这里只是简单的做了个能满足一般需求的轮播,在项目中凑会凑会还是可以的。
1903 0
|
前端开发 C# 容器
【C#/WPF】用Thumb做可拖拽的UI控件
原文:【C#/WPF】用Thumb做可拖拽的UI控件 需求:简单的可拖拽的图片 使用System.Windows.Controls.
2458 0
|
C#
在Winform窗体中使用WPF控件(附源码)
原文:在Winform窗体中使用WPF控件(附源码) 今天是礼拜6,下雨,没有外出,闲暇就写一篇博文讲下如何在Winform中使用WPF控件。原有是我在百度上搜索相关信息无果,遂干脆动手自己实现。 WPF控件的漂亮是Winform无法匹及的,本文主旨是在Winform工程中如何使用WPF控件。
1925 0
|
Web App开发 JavaScript 前端开发
|
Web App开发 移动开发 JavaScript