服务器插件制作_qt自定义可拖动控件

服务器插件制作_qt自定义可拖动控件ExtenderControl是AJAX.NET框架里扩展控件的基类,比如ControlToolKit里的一些扩展控件就是从这个基类派生而来

    ExtenderControl是AJAX.NET框架里扩展控件的基类,比如ControlToolKit里的一些扩展控件就是从这个基类派生而来。这也是AJAX.NET框架提供给用户在客户端定义Behavior的一种方式。这种客户端的Behavior主要用于扩展服务器控件的行为,让服务器控件有更多的客户端功能,提供更好的用户体验。而这种扩展控件的方式是不改变原有服务器的行为,只是新增功能,也算是一种装饰模式。

    这里所做的Extender控件的功能是实现服务器控件在页面上可被拖放,当然这个功能在强大的AJAX.NET的预览版本里已经有了很好的实现,我这里所做的也只是简单的拖放。基本的思路是采用AJAX正式版框架里定义Behavior的方式,然后定义一些模拟拖放的事件。实现拖放的逻辑也很简单,当需要拖放的对象被点击之后,给body添加mousemove和mouseup事件,具体的移动逻辑在mousemove里实现,mouseup则清空body的事件,拖放结束。这个逻辑也是按照<<javascript高级编程>>书上介绍的方法,没有特别深奥的东西。说白了就是演练一下定义extender控件,把一些老的东西重新包装一下。除了简单的拖放逻辑,还提供了一个属性dragCssClass,就是在拖放的时候的样式,比如设置鼠标为move等等。具体代码如下

1.首先定义个extender继承ExtenderControl,当然这个要引用AJAX.NET的System.Web.Extension.dll.要指定
[TargetControlType(typeof(Control))]类型,还需要注册脚本,脚本当然也是嵌入到资源中的。基类方法的作用请看AJAX.NET提供的帮助。

服务器插件制作_qt自定义可拖动控件
服务器插件制作_qt自定义可拖动控件
DragExtender

 1服务器插件制作_qt自定义可拖动控件[assembly: WebResource(AjaxControl.DragBehavior.jstext/javascript)]
 2服务器插件制作_qt自定义可拖动控件namespace AjaxControl
 3服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件{

 4服务器插件制作_qt自定义可拖动控件    [TargetControlType(typeof(Control))]
 5服务器插件制作_qt自定义可拖动控件    public class DragExtender : ExtenderControl
 6服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件    服务器插件制作_qt自定义可拖动控件{

 7服务器插件制作_qt自定义可拖动控件        private string _dragCssClass;
 8服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件        /**//// <summary>
 9服务器插件制作_qt自定义可拖动控件        /// 拖动时的样式
10服务器插件制作_qt自定义可拖动控件        /// </summary>

11服务器插件制作_qt自定义可拖动控件        public string DragCssClass
12服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件        服务器插件制作_qt自定义可拖动控件{

13服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件            get 服务器插件制作_qt自定义可拖动控件return _dragCssClass; }
14服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件            set 服务器插件制作_qt自定义可拖动控件{ _dragCssClass = value; }
15服务器插件制作_qt自定义可拖动控件        }

16服务器插件制作_qt自定义可拖动控件
17服务器插件制作_qt自定义可拖动控件        protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
18服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件        服务器插件制作_qt自定义可拖动控件{   
19服务器插件制作_qt自定义可拖动控件            ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor(Shenba.DragBehavior, targetControl.ClientID);
20服务器插件制作_qt自定义可拖动控件            descriptor.AddProperty(dragCssClassthis._dragCssClass);
21服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件            return new ScriptBehaviorDescriptor[] 服务器插件制作_qt自定义可拖动控件{ descriptor };
22服务器插件制作_qt自定义可拖动控件        }

23服务器插件制作_qt自定义可拖动控件
24服务器插件制作_qt自定义可拖动控件        protected override IEnumerable<ScriptReference> GetScriptReferences()
25服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件        服务器插件制作_qt自定义可拖动控件{

26服务器插件制作_qt自定义可拖动控件            string jsPath = ResolveClientUrl(AjaxControl.DragBehavior.js);
27服务器插件制作_qt自定义可拖动控件            ScriptReference reference = new ScriptReference(jsPath);
28服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件            return new ScriptReference[] 服务器插件制作_qt自定义可拖动控件{ reference };
29服务器插件制作_qt自定义可拖动控件        }

30服务器插件制作_qt自定义可拖动控件
31服务器插件制作_qt自定义可拖动控件        protected override void OnPreRender(EventArgs e)
32服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件        服务器插件制作_qt自定义可拖动控件{

33服务器插件制作_qt自定义可拖动控件            if (!this.DesignMode)
34服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件            服务器插件制作_qt自定义可拖动控件{

35服务器插件制作_qt自定义可拖动控件                // 将脚本添加到scriptmanager的脚本引用中
36服务器插件制作_qt自定义可拖动控件                ScriptManager sm = ScriptManager.GetCurrent(Page);
37服务器插件制作_qt自定义可拖动控件                if (sm == null)
38服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件                服务器插件制作_qt自定义可拖动控件{

39服务器插件制作_qt自定义可拖动控件                    throw new HttpException(a scriptmanager is required in the page.);
40服务器插件制作_qt自定义可拖动控件                }

41服务器插件制作_qt自定义可拖动控件                sm.Scripts.Add(new ScriptReference(AjaxControl.DragBehavior.jsAjaxControl));
42服务器插件制作_qt自定义可拖动控件            }

43服务器插件制作_qt自定义可拖动控件            base.OnPreRender(e);
44服务器插件制作_qt自定义可拖动控件        }

45服务器插件制作_qt自定义可拖动控件    }

46服务器插件制作_qt自定义可拖动控件}

47服务器插件制作_qt自定义可拖动控件

2.接下来是js的脚本,也是核心逻辑的一部分

服务器插件制作_qt自定义可拖动控件
服务器插件制作_qt自定义可拖动控件
DragBehavior.js

 1服务器插件制作_qt自定义可拖动控件Type.registerNamespace(Shenba);
 2服务器插件制作_qt自定义可拖动控件
 3服务器插件制作_qt自定义可拖动控件Shenba.DragBehavior = function (element)
 4服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件{

 5服务器插件制作_qt自定义可拖动控件    Shenba.DragBehavior.initializeBase(this, [element]);
 6服务器插件制作_qt自定义可拖动控件    // 分别用于记录鼠标落点与目标对象坐标的偏差
 7服务器插件制作_qt自定义可拖动控件    this._diffX = 0;
 8服务器插件制作_qt自定义可拖动控件    this._diffY = 0;
 9服务器插件制作_qt自定义可拖动控件}

10服务器插件制作_qt自定义可拖动控件
11服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件Shenba.DragBehavior.prototype = 服务器插件制作_qt自定义可拖动控件{

12服务器插件制作_qt自定义可拖动控件    initialize : function ()
13服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件    服务器插件制作_qt自定义可拖动控件{

14服务器插件制作_qt自定义可拖动控件        Shenba.DragBehavior.callBaseMethod(thisinitialize);
15服务器插件制作_qt自定义可拖动控件        
16服务器插件制作_qt自定义可拖动控件        // 将目标对象的定位转化成绝对定位
17服务器插件制作_qt自定义可拖动控件        this.get_element().style.position = absolute;
18服务器插件制作_qt自定义可拖动控件        this._mouseDownHandler = Function.createDelegate(thisthis._onMouseDown);
19服务器插件制作_qt自定义可拖动控件        $addHandler(this.get_element(), mousedownthis._mouseDownHandler);
20服务器插件制作_qt自定义可拖动控件    }
,
21服务器插件制作_qt自定义可拖动控件    
22服务器插件制作_qt自定义可拖动控件    set_dragCssClass : function(value)
23服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件    服务器插件制作_qt自定义可拖动控件{

24服务器插件制作_qt自定义可拖动控件        if (this._dragCssClass !== value)
25服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件        服务器插件制作_qt自定义可拖动控件{

26服务器插件制作_qt自定义可拖动控件            this._dragCssClass = value;
27服务器插件制作_qt自定义可拖动控件            this.raisePropertyChanged(dragCssClass);
28服务器插件制作_qt自定义可拖动控件        }

29服务器插件制作_qt自定义可拖动控件    }
,
30服务器插件制作_qt自定义可拖动控件    get_dragCssClass : function()
31服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件    服务器插件制作_qt自定义可拖动控件{

32服务器插件制作_qt自定义可拖动控件        return this._dragCssClass;
33服务器插件制作_qt自定义可拖动控件    }
,
34服务器插件制作_qt自定义可拖动控件    
35服务器插件制作_qt自定义可拖动控件    _onMouseDown : function (e)
36服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件    服务器插件制作_qt自定义可拖动控件{

37服务器插件制作_qt自定义可拖动控件        var ele = this.get_element();
38服务器插件制作_qt自定义可拖动控件        this._diffX = e.clientX  ele.offsetLeft;
39服务器插件制作_qt自定义可拖动控件        this._diffY = e.clientY  ele.offsetTop;
40服务器插件制作_qt自定义可拖动控件        
41服务器插件制作_qt自定义可拖动控件        // 给body添加mouseMove合mouseUp事件
42服务器插件制作_qt自定义可拖动控件        this._mouseMoveHandler = Function.createDelegate(thisthis._onMouseMove);
43服务器插件制作_qt自定义可拖动控件        $addHandler(document.body, mousemovethis._mouseMoveHandler);
44服务器插件制作_qt自定义可拖动控件        this._mouseUpHandler = Function.createDelegate(thisthis._onMouseUp); 
45服务器插件制作_qt自定义可拖动控件        $addHandler(document.body, mouseupthis._mouseUpHandler);
46服务器插件制作_qt自定义可拖动控件
47服务器插件制作_qt自定义可拖动控件        this.get_element().className = this._dragCssClass;
48服务器插件制作_qt自定义可拖动控件    }
,
49服务器插件制作_qt自定义可拖动控件    _onMouseMove : function (e)
50服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件    服务器插件制作_qt自定义可拖动控件{

51服务器插件制作_qt自定义可拖动控件        var ele = this.get_element();
52服务器插件制作_qt自定义可拖动控件        ele.style.left = e.clientX  this._diffX;
53服务器插件制作_qt自定义可拖动控件        ele.style.top = e.clientY  this._diffY;
54服务器插件制作_qt自定义可拖动控件    }
,
55服务器插件制作_qt自定义可拖动控件    _onMouseUp : function ()
56服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件    服务器插件制作_qt自定义可拖动控件{

57服务器插件制作_qt自定义可拖动控件        // 鼠标释放之后删除body的事件
58服务器插件制作_qt自定义可拖动控件        $removeHandler(document.body, mousemovethis._mouseMoveHandler);
59服务器插件制作_qt自定义可拖动控件        $removeHandler(document.body, mouseupthis._mouseUpHandler);
60服务器插件制作_qt自定义可拖动控件        this._diffX = 0;
61服务器插件制作_qt自定义可拖动控件        this._diffY = 0;
62服务器插件制作_qt自定义可拖动控件        this.get_element().className = “”;
63服务器插件制作_qt自定义可拖动控件    }
,
64服务器插件制作_qt自定义可拖动控件    
65服务器插件制作_qt自定义可拖动控件    dispose : function ()
66服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件    服务器插件制作_qt自定义可拖动控件{

67服务器插件制作_qt自定义可拖动控件        $clearHandlers(document.body);
68服务器插件制作_qt自定义可拖动控件        $clearHandlers(this.get_element());
69服务器插件制作_qt自定义可拖动控件        Shenba.DragBehavior.callBaseMethod(thisdispose);
70服务器插件制作_qt自定义可拖动控件    }

71服务器插件制作_qt自定义可拖动控件}

72服务器插件制作_qt自定义可拖动控件
73服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件Shenba.DragBehavior.descriptor = 服务器插件制作_qt自定义可拖动控件{

74服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件    properties: [ 服务器插件制作_qt自定义可拖动控件{name: dragCssClass, type: String} ]
75服务器插件制作_qt自定义可拖动控件}

76服务器插件制作_qt自定义可拖动控件
77服务器插件制作_qt自定义可拖动控件Shenba.DragBehavior.registerClass(Shenba.DragBehavior, Sys.UI.Behavior);
78服务器插件制作_qt自定义可拖动控件
79服务器插件制作_qt自定义可拖动控件if (typeof(Sys) !== undefined) Sys.Application.notifyScriptLoaded();
80服务器插件制作_qt自定义可拖动控件
81服务器插件制作_qt自定义可拖动控件
82服务器插件制作_qt自定义可拖动控件

最后在页面中调用就非常的简单,记得添加scriptmanager即可

服务器插件制作_qt自定义可拖动控件
服务器插件制作_qt自定义可拖动控件
Page

1服务器插件制作_qt自定义可拖动控件服务器插件制作_qt自定义可拖动控件<%服务器插件制作_qt自定义可拖动控件@ Register Assembly=AjaxControl Namespace=AjaxControl TagPrefix=shenba %>
2服务器插件制作_qt自定义可拖动控件<asp:ScriptManager ID=”ScriptManager1″ runat=”server”></asp:ScriptManager>
3服务器插件制作_qt自定义可拖动控件    <div>
4服务器插件制作_qt自定义可拖动控件    <asp:Calendar ID=”ca” runat=”server”></asp:Calendar>
5服务器插件制作_qt自定义可拖动控件    <shenba:DragExtender TargetControlID=”ca” DragCssClass=”drag” ID=”dragExtender1″ runat=”server”/>
6服务器插件制作_qt自定义可拖动控件    </div>

目前实现的只是简单拖动,不能像profile那样保存起来,有空再研究下。


完整代码

转载于:https://www.cnblogs.com/shenba/archive/2008/06/12/1218619.html

今天的文章服务器插件制作_qt自定义可拖动控件分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/75256.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注