Ext DataView自身拖拽
Ext的examples中有组件与组件之间的数据拖拽,可就是没找到组件自身中的数据拖拽,找到一个自身拖拽的还是个TreePanel,想着实现方式应该是一样的,可以移植到DataView上去,看了后才发现是风马牛不相及。
在Ext DataView分页+过滤+查询+拖拽一文中我需要这样的功能去实现排序,但是现在出现了一个BUG,那就是只有第一次拖拽的时候可以实现排序,而且被第一个拖进去的数据将会始终排在最后,所以现在需要它自身里面的数据可以拖拽,相互调换位置。
拖拽前:

拖拽后:

工作中要效率,所以能拿来直接用就拿来直接用,没必要自己花时间去想解决方案,学习的话就得先自己想办法了。
在DataView的render事件中调用如下函数即可。
function onDataViewRender(v){ //创建拖拽对象 var dd = new Ext.dd.DragDrop(v.el); //存储被拖拽的节点 var dragData = null; dd.onMouseDown = function(e) { var t,idx,record; try { t = e.getTarget(v.itemSelector); idx = v.indexOf(t); record = v.getStore().getAt(idx); // Found a record to move if (t && record) { dragData = { origIdx : idx, lastIdx : idx, record : record }; return true; } } catch (ex) { dragData = null; } return false; }, //开始拖拽 dd.startDrag = function(x, y) { if (!dragData) { return false; } Ext.fly(v.getNode(dragData.origIdx)).addClass('thumb'); v.el.addClass('thumb-wrap-selected'); }, //结束拖拽 dd.endDrag = function(e) { if (!dragData) { return true; } Ext.fly(v.getNode(dragData.lastIdx)).removeClass('thumb'); v.el.removeClass('thumb-wrap-selected'); return true; }, dd.onDrag = function(e) { var t,idx,record,data = dragData; if (!data) { return false; } try { t = e.getTarget(v.itemSelector); idx = v.indexOf(t); record = v.getStore().getAt(idx); if (idx === data.lastIdx) { return true; } //将数据插入到新的位置 if (t && record) { data.lastIdx = idx; v.getStore().remove(data.record); v.getStore().insert(idx, [data.record]); Ext.fly(v.getNode(idx)).addClass('thumb'); return true; } } catch (ex) { return false; } return false; } }
除非另有声明,本站遵循【署名-非商业性使用-相同方式共享 3.0 共享协议】授权。
转载原创文章请注明,转载自:Neeke[http://www.ineeke.com]
本文链接: http://www.ineeke.com/archives/ext-dataview-self-drag-drop/

楼主好,我做了个Ext.DataView图片浏览,图片可以拖拽,上下左右移,放大缩小和图片还原,能多选,但图片不样大,多选后,点击还原,所有图片都变成第一个被选的图片尺寸了,请问怎么解决呢
我没太看明白你的意思,不过按理来说是所有的图片大小一致是正确的,这个是在CSS里面定义好的,DataView中所有的图片都应用该样式。
如果你是要图片显示时按各自的尺寸显示,那么去掉其所使用的样式应该就可以了。