天天看點

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拖動功能

繼續閱讀