portal

最新推荐文章于 2024-08-19 15:26:06 发布

hxf5129096

最新推荐文章于 2024-08-19 15:26:06 发布

阅读量90

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/hxf5129096/article/details/84051792

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Grid to FormPanel Drag and Drop Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="../shared/code-display.js"></script>
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />

<body></body>
<script>
Ext.onReady(function(){
DraggablePanel = Ext.extend(Ext.Panel, {
draggable: {
insertProxy: true,
isTarget : false
},
height: 120
});
Ext.reg('portlet', DraggablePanel);

var viewport = new Ext.Viewport({
layout: 'column',
items: [{
columnWidth: .333,
baseCls: 'x-plain',
bodyStyle:'padding:0px',
defaults: {frame: true, style: 'margin: 10px'},
items: [
new DraggablePanel({
title: 'Portal 00',
html: 'portal 00'
}),
new DraggablePanel({
title: 'Portal 01',
html: 'portal 01'
}),
new DraggablePanel({
title: 'Portal 02',
html: 'portal 02'
}),
new DraggablePanel({
title: 'Portal 03',
html: 'portal 03'
})
]
}, {
columnWidth: .333,
baseCls: 'x-plain',
bodyStyle:'padding:0px',
defaults: {frame: true, style: 'margin: 10px'},
items: [
new DraggablePanel({
title: 'Portal 10',
html: 'portal 10'
}),
new DraggablePanel({
title: 'Portal 11',
html: 'portal 11'
}),
new DraggablePanel({
title: 'Portal 12',
html: 'portal 12'
})
]
}, {
columnWidth: .333,
baseCls: 'x-plain',
bodyStyle:'padding:0px',
defaults: {frame: true, style: 'margin: 10px'},
items: [
new DraggablePanel({
title: 'Portal 20',
html: 'portal 20'
}),
new DraggablePanel({
title: 'Portal 21',
html: 'portal 21'
}),
new DraggablePanel({
title: 'Portal 22',
html: 'portal 22'
})
]
}]
});

var overrides = {
onDragDrop: function(evtObj, targetElId) {
var p = this.panel;
var srcContainer = p.findParentByType('panel');
var destContainer = Ext.getCmp(targetElId);
var s = srcContainer.remove(p, false);
srcContainer.doLayout();
destContainer.insert(this.insertIndex, s);
p.el.dom.style.display = '';
destContainer.doLayout();
Ext.log('*********onDragDrop to '+this.insertIndex+'*********');
},

onDragOver: function(evt, targetElId){
var p = this.panel
var destContainer = Ext.getCmp(targetElId);
var destEl = destContainer.body.dom;

//Ext.log(destContainer.getEl().getHeight());

for(var i=0; i<destContainer.items.length; i++){
var child = destContainer.items.get(i);
//var xy = child.getEl().getCenterXY();
var box = child.getBox();
var halfY = box.y+box.height/2;
if(evt.getXY()[1]< halfY){
//Ext.log(evt.getXY()[1] + '<' + halfY +'insert before' + child.title + '----------' + i);

var beforeNode = child.getEl().dom;
//Ext.log(destEl.id);
this.insertIndex = i;
this.proxy.moveProxy(destEl, beforeNode);
Ext.log(p.el.dom);
this.proxy.getEl().dom.style.marginBottom = '10px';

return;
}

}
Ext.log('--------insert to last--------');
this.insertIndex = i;
this.proxy.moveProxy(destEl, null);
}
}
for(var i=0; i<viewport.items.length; i++){
var col = viewport.items.get(i);
var ddTarget = new Ext.dd.DDTarget(col.id, 'ddgroup');
for(var j=0; j<viewport.items.get(i).items.length; j++){
var p = viewport.items.get(i).items.get(j);
var dd = p.dd;
dd.addToGroup('ddgroup');
Ext.apply(dd, overrides);
}
}

});
</script>
</html>

hxf5129096

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
portal

Grid to FormPanel Drag and Drop Example Ext.onReady(function(){ DraggablePanel = Ext.extend(Ext.Panel, { draggable: { insertProxy: true, ...
复制链接

扫一扫