Easyui-panel Panel drag and drop

On the internet to find a lot of examples are not satisfied I need to find an online on the Easyui is a development of the demo and then according to the demo of what I need to expand to meet my needs

I don't have much to say about the code.

First of all, you must lead Easyui JS.

<style type= "Text/css" >
#P-panel. Portal {padding:0; margin:0; border:1px solid #99BBE8; Overflow:auto}
#P-panel. portal-noborder {border:0;}
#P-panel. Portal-panel {margin-bottom:10px;}
#P-panel. portal-column-td {vertical-align:top;}
#P-panel. Portal-column {padding:10px 0 10px 10px; overflow:hidden;}
#P-panel. portal-column-left {padding-left:10px;}
#P-panel. portal-column-right {padding-right:10px;}
#P-panel. portal-proxy {background-color: #0e2d5f; opacity:0.6; Filter:alpha (opacity=60);}
#P-panel. portal-spacer {border:3px dashed #eee; margin-bottom:10px;}
</style>

<script type= "Text/javascript" >

(function ($) {
function init (target) {
$ (target). addclass (' portal ');
var table = $ (' <table border= "0" cellspacing= "0" cellpadding= "0" ><tr></tr></table> '). AppendTo (target);
var tr = table.find (' tr ');

var columnWidths = [];
var totalWidth = 0;
$ (target). Children (' Div:first '). addclass (' Portal-column-left ');
$ (target). Children (' Div:last '). addclass (' portal-column-right ');
$ (target). Find (' >div '). each (function () {//each column panel
var column = $ (this);
TotalWidth + = Column.outerwidth ();
Columnwidths.push (Column.outerwidth ());

var td = $ (' <td class= "PORTAL-COLUMN-TD" ></td> "). AppendTo (TR)
Column.addclass (' Portal-column '). AppendTo (TD);
Column.find (' >div '). each (function () {//Per portal panel
var p = $ (this). addclass (' portal-p '). Panel ({
Dosize:false,
CLS: ' Portal-panel '//,
Onclose:function () {$ (this). Panel ("Destroy");
});
var opts = P.panel ("Options"), OnClose = Opts.onclose;
Opts.onclose = function () {
if ($.isfunction (OnClose)) {onclose.apply (this, arguments);}
$ (this). Panel ("Destroy");
};
Makedraggable (target, p);
});
});
for (var i = 0; i < columnwidths.length; i++) {
Columnwidths[i]/= totalWidth;
}

$ (target). Bind (' _resize ', function () {
var opts = $.data (target, ' Portal '). Options;
if (Opts.fit = = True) {
SetSize (target);
}
return false;
});

return columnWidths;
}

function SetSize (target) {
var t = $ (target);
var opts = $.data (target, ' Portal '). Options;
if (Opts.fit) {
var p = t.parent ();
Opts.width = P.width ();
Opts.height = P.height ();
}
if (!isnan (opts.width)) {
T._outerwidth (Opts.width);
} else {
T.width (' Auto ');
}
if (!isnan (opts.height)) {
T._outerheight (Opts.height);
} else {
T.height (' Auto ');
}

var hasscroll = t.find (' >table '). Outerheight () > T.height ();
var width = t.width ();
var columnWidths = $.data (target, ' portal '). columnWidths;
var leftwidth = 0;

Calculate and set every column size
for (var i = 0; i < columnwidths.length; i++) {
var p = t.find (' div.portal-column:eq (' + i + ') ');
var w = math.floor (width * columnwidths[i]);
if (i = = columnwidths.length-1) {
W = width-leftwidth-(Hasscroll = = true? 28:10);
W = width-leftwidth-(Hasscroll = = true? 18:0);
}
P._outerwidth (w);
Leftwidth + = P.outerwidth ();

Resize every panel of the column
P.find (' div.portal-p '). Panel (' resize ', {width:p.width ()});
}
Opts.onResize.call (target, Opts.width, opts.height);
}

function makedraggable (target, panel) {
var spacer;
Panel.panel (' Panel '). Draggable ({
Handle: ' >div.panel-header>div.panel-title ',
Proxy:function (source) {
var p = $ (' <div class= "Portal-proxy" >proxy</div> "). InsertAfter (source);
P.width ($ (source). width ());
P.height ($ (source). Height ());
P.html ($ (source). HTML ());
P.find (' Div.portal-p '). Removeclass (' portal-p '). Hide ();
return p;
},
Onbeforedrag:function (e) {
E.data.starttop = $ (this). Position (). Top + $ (target). ScrollTop ();
},
Onstartdrag:function (e) {
$ (this). Hide ();
Spacer = $ (' <div class= ' portal-spacer ' ></div> '). InsertAfter (this);
Setspacersize ($ (this). Outerwidth (), $ (this). Outerheight ());
},
Ondrag:function (e) {
var p = Findpanel (E, this);
if (p) {
if (P.pos = = ' up ') {
Spacer.insertbefore (P.target);
} else {
Spacer.insertafter (P.target);
}
Setspacersize ($ (p.target). Outerwidth ());
} else {
var c = Findcolumn (e);
if (c) {
if (C.find (' div.portal-spacer '). Length = = 0) {
Spacer.appendto (c);
SetSize (target);
Setspacersize (C.width ());
}
}
}
},
Onstopdrag:function (e) {
$ (this). css (' position ', ' static ');
$ (this). Show ();
Spacer.hide ();
$ (this). InsertAfter (spacer);
Spacer.remove ();
SetSize (target);
Panel.panel (' move ');

var opts = $.data (target, ' Portal '). Options;
Opts.onStateChange.call (target);
}
});

/**
* Find which panel the cursor is over
*/
Function Findpanel (e, source) {
var result = null;
$ ( Target). Find (' div.portal-p '). each (function () {
var pal = $ (this). Panel (' Panel ');
if (pal[0]! = Source) {
var pos = Pal.offset ();
if (E.pagex > Pos.left && e.pagex < Pos.left + pal.outerwidth ()
&& e.pagey > Pos.top & ;& E.pagey < Pos.top + pal.outerheight ()) {
if (E.pagey > Pos.top + pal.outerheight ()/2) {
result = { br> Target:pal,
Pos: ' Down '
},
} else {
result = {
Target:pal,
Pos: ' Up '
}
}
}
}
});
return result;
}

/**
* Find which portal column the cursor is over
*/
function Findcolumn (e) {
var result = null;
$ (target). Find (' Div.portal-column '). each (function () {
var pal = $ (this);
var pos = Pal.offset ();
if (E.pagex > Pos.left && e.pagex < Pos.left + pal.outerwidth ()) {
result = PAL;
}
});
return result;
}

/**
* Set the spacer size
*/
function setspacersize (width, height) {
Spacer._outerwidth (width);
if (height) {
Spacer._outerheight (height);
}
}
}

$.fn.portal = function (options, param) {
if (typeof options = = ' String ') {
Return $.fn.portal.methods[options] (this, param);
}
options = Options | | {};
Return This.each (function () {
var state = $.data (this, ' Portal ');
if (state) {
$.extend (state.options, Options);
} else {
State = $.data (this, ' portal ', {
Options: $.extend ({}, $.fn.portal.defaults, $.fn.portal.parseoptions (this), options),
Columnwidths:init (This)
});
}
if (State.options.border) {
$ (this). Removeclass (' Portal-noborder ');
} else {
$ (this). addclass (' Portal-noborder ');
}
SetSize (this);
});
};

$.fn.portal.methods = {
Options:function (JQ) {
Return $.data (jq[0], ' Portal '). Options;
},
Resize:function (JQ, param) {
Return Jq.each (function () {
if (param) {
var opts = $.data (this, ' Portal '). Options;
if (param.width) opts.width = param.width;
if (param.height) opts.height = param.height;
}
SetSize (this);
});
},
Getpanels:function (JQ, columnindex) {
var c = JQ; The Panel container
if (columnindex >= 0) {
c = Jq.find (' div.portal-column:eq (' + columnindex + ') ');
}
var panels = [];
C.find (' div.portal-p '). each (function () {
Panels.push ($ (this));
});
return panels;
},
Add:function (JQ, param) {//param: {panel,columnindex}
Return Jq.each (function () {
if (!param | |!$.isnumeric (PARAM.COLUMNINDEX) | |!param.panel) {return;}
var portal = $ (this), opts = Portal.portal ("Options");
if (Opts.onBeforeAdd.call (this, param.columnindex, param.panel) = = False) {return;}
var c = portal.find (' div.portal-column:eq (' + param.columnindex + ') ');
var p = param.panel.addClass (' portal-p ');
P.panel (' Panel '). addclass (' Portal-panel '). AppendTo (c);
Makedraggable (this, p);
P.panel (' resize ', {width:c.width ()});
var panelopts = P.panel ("Options"), OnClose = Panelopts.onclose;
Panelopts.onclose = function () {
if ($.isfunction (OnClose)) {onclose.apply (this, arguments);}
if (!p.length) {return;}
var BODY = $ ("body");
if ($.contains (body[0], p[0])) {P.panel ("destroy");}
}
Opts.onAdd.call (This, Param.columnindex, Param.panel);
});
},
Remove:function (JQ, panel) {
Return Jq.each (function () {
var p = $ (this), opts = P.portal ("Options");
if (Opts.onBeforeRemove.call (this, panel) = = false) {return;}
var panels = p.portal (' getpanels '), panelopts = Panel.panel ("Options");
for (var i = 0; i < panels.length; i++) {
var p = panels[i];
if (p[0] = = $ (panel) [0]) {
P.panel (' Destroy ');
}
}
Opts.onRemove.call (this, panelopts);
});
},
Addcolumn:function (JQ) {
Return Jq.each (function () {
var state = $.data (this, "Portal"), opts = state.options, columnWidths = state.columnwidths,
Portal = $ (this), TotalWidth = Portal.outerwidth (),
TR = Portal.find (">table tr"), TD = $ ("<td></td>"). AddClass ("Portal-column-td"). AppendTo (TR),
Column = $ ("<div></div>"). AddClass ("Portal-column"). AppendTo (TD),
width = parsefloat (1)/(columnwidths.length + 1);
if (Opts.onBeforeAddColumn.call (this, columnwidths.length) = = False) {return;}
for (var i = 0; i < columnwidths.length; i++) {columnwidths[i] = width;}
Columnwidths.push (width);
Tr.find (">td>div.portal-column"). Removeclass ("Portal-column-left portal-column-right");
Tr.find (">td>div.portal-column:first"). AddClass ("Portal-column-left");
Tr.find (">td>div.portal-column:last"). AddClass ("Portal-column-right");
SetSize (this);
Opts.onAddColumn.call (this, columnwidths.length-1);
});
},
Removecolumn:function (JQ, index) {
Return Jq.each (function () {
var state = $.data (this, "Portal"), opts = state.options, columnWidths = state.columnwidths;
if (!$.isnumeric (index) | |!columnwidths | |!columnwidths.length | | index > COLUMNWIDTHS.LENGTH-1) {return;}
if (Opts.onBeforeRemoveColumn.call (this, index) = = False) {return;}
var tr = $ (this). Find (">table tr"), Width = parsefloat (1)/(COLUMNWIDTHS.LENGTH-1);
Columnwidths.pop ();
for (var i = 0; i < columnwidths.length; i++) {columnwidths[i] = width;}
Tr.find (">td:eq (" + Index + ")"). Remove ();
Tr.find (">td>div.portal-column"). Removeclass ("Portal-column-left portal-column-right");
Tr.find (">td>div.portal-column:first"). AddClass ("Portal-column-left");
Tr.find (">td>div.portal-column:last"). AddClass ("Portal-column-right");
SetSize (this);
Opts.onRemoveColumn.call (this, index);
});
},
Columns:function (JQ) {
Return $.data (jq[0], "Portal"). Columnwidths.length;
},
Disabledragging:function (JQ, panel) {
Panel.panel (' Panel '). draggable (' disable ');
return JQ;
},
Enabledragging:function (JQ, panel) {
Panel.panel (' Panel '). draggable (' Enable ');
return JQ;
}
};

$.fn.portal.parseoptions = function (target) {
Return $.extend ({}, $.parser.parseoptions (target, ["width", "height", {border: "Boolean", Fit: "Boolean"}]));
};

$.fn.portal.defaults = {
Width: ' Auto ',
Height: ' Auto ',
Border:true,
Fit:false,
Onresize:function (width, height) {},
Onstatechange:function () {},

Onbeforeadd:function (columnindex, panel) {},
Onadd:function (columnindex, panel) {},

Onbeforeaddcolumn:function (columnindex) {},
Onaddcolumn:function (columnindex) {},

Onbeforeremove:function (panel) {},
Onremove:function (paneloption) {},

Onbeforeremovecolumn:function (columnindex) {},
Onremovecolumn:function (columnindex) {}
};

$.parser.plugins.push ("portal");

}) (JQuery);

</script>

<div id= "P-panel" class= "Easyui-layout" data-options= "Fit:true" >
<div data-options= "region: ' Center ', border:false" style= "Overflow:hidden;" >
<div id= "portal" class= "Easyui-portal" data-options= "Fit:true, Border:false" >
<div style= "width:33%;" >
<div id= "Reloadspanel" data-options= "title: ' Project Information ', height:200, Collapsible:true, Closable:true, tools: [{iconcls: ' Icon-reload '}] ">
</div>
<div data-options= "title: ' Feature Brief ', height:200, Collapsible:true, Closable:true, tools: [{iconcls: ' Icon-reload '}]" & Gt
</div>
</div>
<div style= "width:44%;" >
<div data-options= "title: ' LICENSE ', height:200, Iniframe:true, Collapsible:true, closable:true" ></div>
<div data-options= "title: ' Update Log ', height:200, Iniframe:true, Collapsible:true, closable:true" ></div>
</div>
<div style= "width:23%;" >
<div data-options= "title: ' About this project ', height:200, Collapsible:true, closable:true" >
</div>
<div id= "Donatepanel" data-options= "title: ' Open Source Power donation ', height:200, Closable:true, Collapsible:true,closable:true" >
</div>
</div>
</div>
</div>
</div>

This article from: http://jqext.sinaapp.com/

Easyui-panel Panel drag (turn)