jquery 面板拖拽
在网上找了好多的例子 都不满足我所需要 在网上找了一篇关于easyui是一个拓展的demo 然后根据demo 把我所需要的东西进行再次拓展 满足我的需求
也不多说了 上代码
首先 你肯定是要导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 () { // each 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 = {
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: '项目信息', height: 200, collapsible: true, closable: true, tools: [{ iconCls: 'icon-reload' }]">
</div>
<div data-options="title: '功能简介', height: 200, collapsible: true, closable: true, tools: [{ iconCls: 'icon-reload' }]">
</div>
</div>
<div style="width: 44%;">
<div data-options="title: 'LICENSE', height: 200, iniframe: true, collapsible: true, closable: true"></div>
<div data-options="title: '更新日志', height: 200, iniframe: true, collapsible: true, closable: true"></div>
</div>
<div style="width: 23%;">
<div data-options="title: '关于本项目', height: 200, collapsible: true, closable: true" >
</div>
<div id="donatePanel" data-options="title: '开源动力捐赠', height: 200, closable: true, collapsible: true,closable:true" >
</div>
</div>
</div>
</div>
</div>
本文来自 :http://jqext.sinaapp.com/
jquery 面板拖拽的更多相关文章
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- QQ面板拖拽(慕课网DOM事件探秘)(上)
QQ面板拖拽,效果如图 JavaScript代码如下: function getByClass(clsName, parent) { var oParent = parent ? document.g ...
- jquery实现拖拽以及jquery监听事件的写法
很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...
- jquery sortTable拖拽排序
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
- jQuery 鼠标拖拽排序
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- SpringMvc+jQuery 文件拖拽上传、选择上传
最近做了个简易的基于boostrap的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图: file ...
- 面向对象+jquery实现拖拽功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JQuery之拖拽插件
一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...
随机推荐
- hiho一下123周 后缀数组四·重复旋律
后缀数组四·重复旋律4 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为长度为 N 的数构成的数列.小Hi ...
- 2016HUAS_ACM暑假集训4K - 基础DP
我不知道怎么用DP,不过DFS挺好用.DFS思路很明显,搜索.记录,如果刚好找到总价值的一半就说明搜索成功. 题目大意:每组6个数,分别表示价值1到6的物品个数.现在问你能不能根据价值均分. Samp ...
- X86 Socket 通信
struct txd_socket_handler_t { int fd; }; txd_socket_handler_t *txd_tcp_socket_create() { txd_socket_ ...
- 3-HOP: A High-Compression Indexing Scheme for Reachability Query
title: 3-HOP: A High-Compression Indexing Scheme for Reachability Query venue: SIGMOD'09 author: Ruo ...
- 35 个 Java 代码性能优化总结
前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用, ...
- ajaxpro 异步调用
AjaxPro一般默认是同步调用,异步调用只需要在方法后面加一个callback函数,直接取value属性即可.例如: MyNameSpace.Page1.getOtherConfig("A ...
- 关于电信cdma基站nid,sid,bid的解释
通过cdma的基站代码确定该基站的经纬度位置,必须知道Sid.Nid.Bid这三个基站数据,缺一不可. SID 是系统识别码,每个地级市只有一个sid,是唯一的. NID是网络识别码,由各本地网管理, ...
- maven 环境搭建
1.maven环境搭建 1)下载maven,http://maven.apache.org/download.cgi,到本地解压,然后配置环境变量 MAVEN_HOME:D:\software\apa ...
- mysql内存使用以及优化中需要的几点注意
1.从内存中读取数据是微秒级别的.而从磁盘读则是毫秒级别的.二者相差一个数量级.所以想优化数据库,第一个要做到的就是优化io. 2.key_buffer_size[global]设置的内存区域大小缓存 ...
- C#实现略缩图
public class GenerateThumbnail { private Image imageFrom; /// <summary> /// 源图的路径(含文件名及扩展名 /// ...