天天看点

ExtJs学习笔记(24)-Drag/Drop拖动功能

直接给代码吧,主要重点已经在代码里注释了

看下效果图:

1.拖动Green块(但还未到达目标区)时的效果:

ExtJs学习笔记(24)-Drag/Drop拖动功能

2.拖动Green块(到达目标区)时的效果

ExtJs学习笔记(24)-Drag/Drop拖动功能

3.拖动完成后的效果

ExtJs学习笔记(24)-Drag/Drop拖动功能

4."我可以随便拖"的拖动效果

ExtJs学习笔记(24)-Drag/Drop拖动功能

5."我可以随便拖"拖动完成后的效果

ExtJs学习笔记(24)-Drag/Drop拖动功能

简单说明几点:

1.ExtJs中的拖动功能,只要记住DDProxy是用来拖动的组件,而DDTarget就是用来放拖动块的容器就可以了,其它东西比如DragZone,DragSource都是继承自DDProxy,同样基本功能也就是拖动块

2.DDProxy其它的常用事件,可以参考官方的API文档

再来改进一下:

ExtJs学习笔记(24)-Drag/Drop拖动功能

这一次我们建立了二个目标容器

ExtJs学习笔记(24)-Drag/Drop拖动功能

并且第二个容器仅接受红色的色块

ExtJs学习笔记(24)-Drag/Drop拖动功能

继续阅读