代码改变世界

【原】改进了的"利用Silverlight实现类似iGoogle的浮动拖拽效果"

2009-03-03 01:40  拖鞋不脱  阅读(4031)  评论(20编辑  收藏  举报

上一篇”利用Silverlight实现类似iGoogle的浮动拖拽效果”是我第一篇发到博客园首页的文章,吸引到的读者之多令我受宠若惊,感谢各位看官捧场,在Google Analysis上画了一条陡峭的斜线,令小博蓬荜生辉:)而有朋友在留言中提出拖拽控件在拖拽过程中不够灵活,很容易失去鼠标焦点。事实上,在测试上一篇代码的时候就有发现这个问题,当时给了自己一个“这是客户端运算响应瓶颈”的借口,就得过且过了。但被几位点破,令我多少有些羞愧,于是重新审视iGoogle页面,发现在移动较快的时候,也有模块“卡住”的情况,但片刻之后又跟上了鼠标的移动,并没有出现“掉队”的结果。思考之后,得出结论,iGoogle也许是从全局而非被拖拽控件本身来考虑拖拽行为的。于是重新编写代码,于是又有了新的Demo:

这次各位可以随便拖拽方块,怎么快都可以,只要鼠标不超出Silverlight的范围(黑色边框)。

首先考虑三个事件:

拖拽的全过程中包括三个事件:MouseLeftButtonDown(左键按下),MouseLeftButtonUp(左键抬起),MouseMove(左键移动)。上一篇文章中的做法是三个事件全部属于DragableGrid。虽然从逻辑上考虑没有问题,但实际操作中,由于鼠标运动过快,可能会脱离DragableGrid,使其无法处理鼠标事件;而另一方面,在拖拽过程中,无论鼠标如何移动,是不会离开拖拽的场所,也就是最外层的Grid容器的范围的。所以现在只给DragableGrid保留了MouseLeftButtonDown事件,因为只有鼠标点击到DragableGrid上才会开始拖拽行为,而MouseLeftButtonUp与MouseMove则放在了Grid上进行处理。

重新架构代码:

之前的代码DragableGrid和ShadowGrid耦合度极高,基本上是我中有你,你中有我。而考虑在拖拽场景中,拖拽实际上影响的只是控件的定位、顺序,而与控件本身的行为、样式以及功能逻辑没有任何关系。那么与其把控制定位的代码分散在各个控件之中,不如用一个统一的管理器来调度控件的拖拽。而且拖拽的特点是:同一时间只可能有一个控件被拖拽,那么用静态的管理器或者单件就是很顺理成章的了

static public Panel ContainerGrid;
static public List<Panel> ContainerPanels;

static private FrameworkElement _draggingGrid;
static private Grid _shadowGrid = null;
static private bool _isDragging;

/// <summary>
/// 鼠标拖拽起始点(相对于被拖拽的控件)
/// </summary>
private static Point _beginPoint = new Point();
private static int _hIndex = 0;
private static int _vIndex = 0;

除了因为需要外部设定而设为公有的ContainerGrid和ContainerPanel,其余的都是在管理器内部调用的用于实现拖拽逻辑的私有成员。而且由于所有拖拽逻辑的实现都在管理器内部,而对牵涉到的控件并没有任何要求,所以这里表示容器的ContainerGrid、ContainerPanel以及表示正在被拖拽的控件的_draggingGrid,我都使用了最基础的类型。

其余的代码和上一篇类似,只是把它们从DragableGrid和ShadowGrid中提取出来,移到了DragManager中,这里不再赘述。

 

源代码下载:改进的可拖拽Silverlight控件源码

题外话,上一篇文章得到了几位朋友的鼓励,小弟十分感谢。但小弟还只能算菜鸟一只,尤其在设计模式的应用上生疏的很,在这里发文一方面是分享,另一方面更是向园子里的朋友们求教,还望各位不吝赐教,小弟感激不尽~~