Skip to content

Z
zui

易企天创 / zui
大约 1 年 前同步成功

通知 6
Star 0
Fork 1
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

提交 8ee9277a 编写于 作者: C Catouse
浏览文件
操作

* updated droppable.js. 

 + added boards.js.
上级 35e4a2fa
隐藏空白更改
内联 并排
Showing with 602 addition and 63 deletion
assets/js/doc.js
浏览文件 @ 8ee9277a
......@@ -121,21 +121,22 @@ $(function()
{
$('.droppable-target').removeClass('panel-warning').removeClass('panel-success').find('.panel-heading').text('拖动到这里。');
},
drop: function(event, target)
drop: function(event)
{
messager.show('真棒！');
$('.droppable-target').removeClass('panel-success').removeClass('panel-warning');
if(target)
if(event.target)
{
target.addClass('panel-success').find('.panel-heading').text('成功拖到目的地。');
event.target.addClass('panel-success').find('.panel-heading').text('成功拖到目的地。');
}
},
drag: function(event, isIn, target)
drag: function(event)
{
$('.droppable-target').removeClass('panel-success').removeClass('panel-warning');
console.log(isIn);
if(target) target.addClass('panel-warning');
if(event.target) event.target.addClass('panel-warning');
}
});
$('.boards').boards();
});
dist/css/zui.css
浏览文件 @ 8ee9277a
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
dist/js/zui.min.js
浏览文件 @ 8ee9277a
......@@ -30,6 +30,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
// @koala-append "cookie.js"
// @koala-append "shortcuts.js"
// @koala-append "resize.js"
// @koala-append "boards.js"
/* ========================================================================
......@@ -2287,7 +2288,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
this.init();
};
Droppable.DEFAULTS = {container: 'body'};
Droppable.DEFAULTS = {container: 'body', flex: false};
Droppable.prototype.getOptions = function (options)
{
......@@ -2308,50 +2309,61 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
$e.mousedown(function(event)
{
if(setting.hasOwnProperty('start') && $.isFunction(setting['start']))
if(setting.hasOwnProperty('before') && $.isFunction(setting['before']))
{
var isSure = setting['start'](event);
var isSure = setting['before']({event: event, element: $e});
if (isSure != undefined && (!isSure)) return;
}
var $targets = $(setting.target),
target = null,
shadow = null,
$container = $(setting.container),
pos = $e.offset(),
isIn = false;
isIn = false, isSelf = true;
var cPos = $container.offset(),
startOffset = {x: event.pageX - pos.left + cPos.left, y: event.pageY - pos.top + cPos.top};
$e.addClass('drag-start');
$e.addClass('drag-from');
$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp);
var shadow = $e.clone().addClass('drag-shadow').css(
{
position: 'absolute',
left: pos.left - cPos.left,
top: pos.left - cPos.left,
transition: 'none'
}).appendTo($container);
event.preventDefault();
function mouseMove(event)
{
if(shadow == null)
{
shadow = $e.clone().removeClass('drag-from').addClass('drag-shadow').css(
{
position: 'absolute',
left: pos.left - cPos.left,
top: pos.left - cPos.left,
transition: 'none'
}).appendTo($container);
$e.addClass('dragging');
if(setting.hasOwnProperty('start') && $.isFunction(setting['start']))
{
setting['start']({event: event, element: $e});
}
}
var mX = event.pageX,
mY = event.pageY;
$e.removeClass('drag-start').addClass('dragging');
shadow.addClass('dragging').css(
shadow.css(
{
left : event.pageX-startOffset.x,
top : event.pageY-startOffset.y
});
isIn = false;
var idx = -1;
$targets.removeClass('drop-in').each(function(index, el)
var idx = -1, isNew = false;
if(!setting.flex)
{
$targets.removeClass('drop-to');
}
$targets.each(function(index, el)
{
var t = $(this);
var tPos = t.offset();
......@@ -2363,43 +2375,68 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
if(mX > tX && mY > tY && mX < (tX + tW) && mY < (tY + tH))
{
isIn = true;
if($e.data('id') != t.data('id')) isSelf = false;
if(target == null || (target.data('id') != t.data('id') && (!isSelf))) isNew = true;
target = t;
idx = index;
t.addClass('drop-in');
if(setting.flex)
{
$targets.removeClass('drop-to');
}
t.addClass('drop-to');
return false;
}
});
$e.toggleClass('drop-in', isIn);
shadow.toggleClass('drop-in', isIn);
if(!setting.flex)
{
$e.toggleClass('drop-in', isIn);
shadow.toggleClass('drop-in', isIn);
}
else if(target != null && target.length)
{
isIn = true;
}
if(setting.hasOwnProperty('drag') && $.isFunction(setting['drag']))
{
setting['drag'](event, isIn, target, idx);
setting['drag']({event: event, isIn: isIn, target: target, element: $e, isNew: isNew, selfTarget: isSelf});
}
}
function mouseUp(event)
{
if(shadow == null)
{
$e.removeClass('drag-from');
$(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
return;
}
if(!isIn) target = null;
var isSure = true;
if(setting.hasOwnProperty('beforeDrop') && $.isFunction(setting['beforeDrop']))
{
var isSure = setting['beforeDrop'](event, isIn, target);
var isSure = setting['beforeDrop']({event: event, isIn: isIn, target: target, element: $e, isNew: isNew, selfTarget: isSelf});
if (isSure != undefined && (!isSure)) isSure = false;
else isSure = true;
}
if(isSure && isIn && setting.hasOwnProperty('drop') && $.isFunction(setting['drop']))
{
setting['drop'](event, target);
setting['drop']({event: event, target: target, element: $e, isNew: (!isSelf) && target != null});
}
$(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
$targets.removeClass('drop-in');
$e.removeClass('dragging');
$targets.removeClass('drop-to');
$e.removeClass('dragging').removeClass('drag-from');
shadow.remove();
if(setting.hasOwnProperty('finish') && $.isFunction(setting['finish']))
{
setting['finish']({event: event, target: target, element: $e, isNew: (!isSelf) && target != null});
}
event.preventDefault();
}
});
......@@ -4407,3 +4444,149 @@ shortcut = {
};
}(jQuery,this);
/* Boards */
+function($, window, document, Math)
{
"use strict";
if (!$.fn.droppable) throw new Error('droppable requires for boards');
var Boards = function(element, options)
{
this.$ = $(element);
this.options = this.getOptions(options);
this.getLang();
this.init();
};
Boards.DEFAULTS =
{
lang: 'zh-cn',
langs:
{
'zh-cn': {appendToTheEnd: '移动到末尾'},
'zh-tw': {appendToTheEnd: '移动到末尾'},
'en': {appendToTheEnd: 'Move to the end.'}
}
}; // default options
Boards.prototype.getOptions = function (options)
{
options = $.extend({}, Boards.DEFAULTS, this.$.data(), options);
return options;
};
Boards.prototype.getLang = function()
{
if(!this.options.lang)
{
if(typeof(config) != 'undefined' && config.clientLang)
{
this.options.lang = config.clientLang;
}
else
{
var hl = $('html').attr('lang');
this.options.lang = hl? hl : 'en';
}
this.options.lang = this.options.lang.replace(/-/, '_').toLowerCase();
}
this.lang = this.options.langs[this.options.lang] || this.options.langs[Boards.DEFAULTS.lang];
};
Boards.prototype.init = function()
{
var idSeed = 1;
var lang = this.lang;
this.$.find('.board-item:not(".disable-drop"), .board:not(".disable-drop")').each(function()
{
var $this = $(this);
if($this.attr('id'))
{
$this.attr('data-id', $this.attr('id'));
}
else if(!$this.attr('data-id'))
{
$this.attr('data-id', idSeed++);
}
if($this.hasClass('board'))
{
$this.find('.board-list').append('<div class="board-item board-item-empty"><i class="icon-plus"></i> {appendToTheEnd}</div>'.format(lang))
.append('<div class="board-item board-item-shadow"></div>'.format(lang));
}
});
this.bind();
};
Boards.prototype.bind = function(items)
{
var $boards = this.$;
if(typeof(items) == 'undefined')
{
items = $boards.find('.board-item:not(".disable-drop, .board-item-shadow")');
}
items.droppable(
{
target: '.board-item:not(".disable-drop, .board-item-shadow")',
flex: true,
start: function(e)
{
$boards.addClass('dragging').find('.board-item-shadow').height(e.element.outerHeight());
},
drag: function(e)
{
$boards.find('.board.drop-in-empty').removeClass('drop-in-empty');
if(e.isIn)
{
var board = e.target.closest('.board').addClass('drop-in');
var shadow = board.find('.board-item-shadow');
var target = e.target;
$boards.addClass('drop-in').find('.board.drop-in').not(board).removeClass('drop-in');
shadow.insertBefore(target);
board.toggleClass('drop-in-empty', target.hasClass('board-item-empty'));
}
},
drop: function(e)
{
if(e.isNew)
{
e.element.insertBefore(e.target);
}
},
finish: function(e)
{
$boards.removeClass('dragging').removeClass('drop-in').find('.board.drop-in').removeClass('drop-in');
}
});
};
$.fn.boards = function(option)
{
return this.each(function()
{
var $this = $(this);
var data = $this.data('zui.boards');
var options = typeof option == 'object' && option;
if (!data) $this.data('zui.boards', (data = new Boards(this, options)));
if (typeof option == 'string') data[option]();
})
};
$.fn.boards.Constructor = Boards;
$(function()
{
$('[data-toggle="boards"]').boards();
});
}(jQuery,window,document,Math);
src/apps/ranzhi/js/zui.js
浏览文件 @ 8ee9277a
......@@ -28,3 +28,4 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
// @koala-append "../../../js/resize.js"
//
// @koala-append "../../../js/droppable.js"
// @koala-append "../../../js/boards.js"
src/apps/ranzhi/less/zui.less
浏览文件 @ 8ee9277a
......@@ -85,3 +85,4 @@
@import "../../../less/views/cards.condensed.less";
@import "../../../less/views/cards.reveal.less";
@import "../../../less/views/dashboard.less";
@import "../../../less/views/boards.less";
src/js/boards.js 0 → 100644
浏览文件 @ 8ee9277a
/* Boards */
+function($, window, document, Math)
{
"use strict";
if (!$.fn.droppable) throw new Error('droppable requires for boards');
var Boards = function(element, options)
{
this.$ = $(element);
this.options = this.getOptions(options);
this.getLang();
this.init();
};
Boards.DEFAULTS =
{
lang: 'zh-cn',
langs:
{
'zh-cn': {appendToTheEnd: '移动到末尾'},
'zh-tw': {appendToTheEnd: '移动到末尾'},
'en': {appendToTheEnd: 'Move to the end.'}
}
}; // default options
Boards.prototype.getOptions = function (options)
{
options = $.extend({}, Boards.DEFAULTS, this.$.data(), options);
return options;
};
Boards.prototype.getLang = function()
{
if(!this.options.lang)
{
if(typeof(config) != 'undefined' && config.clientLang)
{
this.options.lang = config.clientLang;
}
else
{
var hl = $('html').attr('lang');
this.options.lang = hl? hl : 'en';
}
this.options.lang = this.options.lang.replace(/-/, '_').toLowerCase();
}
this.lang = this.options.langs[this.options.lang] || this.options.langs[Boards.DEFAULTS.lang];
};
Boards.prototype.init = function()
{
var idSeed = 1;
var lang = this.lang;
this.$.find('.board-item:not(".disable-drop"), .board:not(".disable-drop")').each(function()
{
var $this = $(this);
if($this.attr('id'))
{
$this.attr('data-id', $this.attr('id'));
}
else if(!$this.attr('data-id'))
{
$this.attr('data-id', idSeed++);
}
if($this.hasClass('board'))
{
$this.find('.board-list').append('<div class="board-item board-item-empty"><i class="icon-plus"></i> {appendToTheEnd}</div>'.format(lang))
.append('<div class="board-item board-item-shadow"></div>'.format(lang));
}
});
this.bind();
};
Boards.prototype.bind = function(items)
{
var $boards = this.$;
if(typeof(items) == 'undefined')
{
items = $boards.find('.board-item:not(".disable-drop, .board-item-shadow")');
}
items.droppable(
{
target: '.board-item:not(".disable-drop, .board-item-shadow")',
flex: true,
start: function(e)
{
$boards.addClass('dragging').find('.board-item-shadow').height(e.element.outerHeight());
},
drag: function(e)
{
$boards.find('.board.drop-in-empty').removeClass('drop-in-empty');
if(e.isIn)
{
var board = e.target.closest('.board').addClass('drop-in');
var shadow = board.find('.board-item-shadow');
var target = e.target;
$boards.addClass('drop-in').find('.board.drop-in').not(board).removeClass('drop-in');
shadow.insertBefore(target);
board.toggleClass('drop-in-empty', target.hasClass('board-item-empty'));
}
},
drop: function(e)
{
if(e.isNew)
{
e.element.insertBefore(e.target);
}
},
finish: function(e)
{
$boards.removeClass('dragging').removeClass('drop-in').find('.board.drop-in').removeClass('drop-in');
}
});
};
$.fn.boards = function(option)
{
return this.each(function()
{
var $this = $(this);
var data = $this.data('zui.boards');
var options = typeof option == 'object' && option;
if (!data) $this.data('zui.boards', (data = new Boards(this, options)));
if (typeof option == 'string') data[option]();
})
};
$.fn.boards.Constructor = Boards;
$(function()
{
$('[data-toggle="boards"]').boards();
});
}(jQuery,window,document,Math);
src/js/droppable.js
浏览文件 @ 8ee9277a
......@@ -11,7 +11,7 @@
this.init();
};
Droppable.DEFAULTS = {container: 'body'};
Droppable.DEFAULTS = {container: 'body', flex: false};
Droppable.prototype.getOptions = function (options)
{
......@@ -32,50 +32,61 @@
$e.mousedown(function(event)
{
if(setting.hasOwnProperty('start') && $.isFunction(setting['start']))
if(setting.hasOwnProperty('before') && $.isFunction(setting['before']))
{
var isSure = setting['start'](event);
var isSure = setting['before']({event: event, element: $e});
if (isSure != undefined && (!isSure)) return;
}
var $targets = $(setting.target),
target = null,
shadow = null,
$container = $(setting.container),
pos = $e.offset(),
isIn = false;
isIn = false, isSelf = true;
var cPos = $container.offset(),
startOffset = {x: event.pageX - pos.left + cPos.left, y: event.pageY - pos.top + cPos.top};
$e.addClass('drag-start');
$e.addClass('drag-from');
$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp);
var shadow = $e.clone().addClass('drag-shadow').css(
{
position: 'absolute',
left: pos.left - cPos.left,
top: pos.left - cPos.left,
transition: 'none'
}).appendTo($container);
event.preventDefault();
function mouseMove(event)
{
if(shadow == null)
{
shadow = $e.clone().removeClass('drag-from').addClass('drag-shadow').css(
{
position: 'absolute',
left: pos.left - cPos.left,
top: pos.left - cPos.left,
transition: 'none'
}).appendTo($container);
$e.addClass('dragging');
if(setting.hasOwnProperty('start') && $.isFunction(setting['start']))
{
setting['start']({event: event, element: $e});
}
}
var mX = event.pageX,
mY = event.pageY;
$e.removeClass('drag-start').addClass('dragging');
shadow.addClass('dragging').css(
shadow.css(
{
left : event.pageX-startOffset.x,
top : event.pageY-startOffset.y
});
isIn = false;
var idx = -1;
$targets.removeClass('drop-in').each(function(index, el)
var idx = -1, isNew = false;
if(!setting.flex)
{
$targets.removeClass('drop-to');
}
$targets.each(function(index, el)
{
var t = $(this);
var tPos = t.offset();
......@@ -87,43 +98,68 @@
if(mX > tX && mY > tY && mX < (tX + tW) && mY < (tY + tH))
{
isIn = true;
if($e.data('id') != t.data('id')) isSelf = false;
if(target == null || (target.data('id') != t.data('id') && (!isSelf))) isNew = true;
target = t;
idx = index;
t.addClass('drop-in');
if(setting.flex)
{
$targets.removeClass('drop-to');
}
t.addClass('drop-to');
return false;
}
});
$e.toggleClass('drop-in', isIn);
shadow.toggleClass('drop-in', isIn);
if(!setting.flex)
{
$e.toggleClass('drop-in', isIn);
shadow.toggleClass('drop-in', isIn);
}
else if(target != null && target.length)
{
isIn = true;
}
if(setting.hasOwnProperty('drag') && $.isFunction(setting['drag']))
{
setting['drag'](event, isIn, target, idx);
setting['drag']({event: event, isIn: isIn, target: target, element: $e, isNew: isNew, selfTarget: isSelf});
}
}
function mouseUp(event)
{
if(shadow == null)
{
$e.removeClass('drag-from');
$(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
return;
}
if(!isIn) target = null;
var isSure = true;
if(setting.hasOwnProperty('beforeDrop') && $.isFunction(setting['beforeDrop']))
{
var isSure = setting['beforeDrop'](event, isIn, target);
var isSure = setting['beforeDrop']({event: event, isIn: isIn, target: target, element: $e, isNew: isNew, selfTarget: isSelf});
if (isSure != undefined && (!isSure)) isSure = false;
else isSure = true;
}
if(isSure && isIn && setting.hasOwnProperty('drop') && $.isFunction(setting['drop']))
{
setting['drop'](event, target);
setting['drop']({event: event, target: target, element: $e, isNew: (!isSelf) && target != null});
}
$(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
$targets.removeClass('drop-in');
$e.removeClass('dragging');
$targets.removeClass('drop-to');
$e.removeClass('dragging').removeClass('drag-from');
shadow.remove();
if(setting.hasOwnProperty('finish') && $.isFunction(setting['finish']))
{
setting['finish']({event: event, target: target, element: $e, isNew: (!isSelf) && target != null});
}
event.preventDefault();
}
});
......
src/js/zui.js
浏览文件 @ 8ee9277a
......@@ -30,3 +30,4 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
// @koala-append "cookie.js"
// @koala-append "shortcuts.js"
// @koala-append "resize.js"
// @koala-append "boards.js"
src/less/views/boards.less 0 → 100644
浏览文件 @ 8ee9277a
.board-item
{
border: 1px solid @color-gray-light;
margin-bottom: 5px;
padding: 6px 10px;
background: @color-back;
.transition();
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
&:hover
{
box-shadow: 0 1px 1 rgba(0, 0, 0, 0.1);
}
&.board-item-empty
{
color: @color-gray;
display: none;
border-style: dashed;
}
&.board-item-shadow
{
.transition();
display: none;
border: none;
padding: 0;
background: @color-gray-light;
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
border-color: @color-gray-light;
}
&.drag-shadow
{
width: 250px;
border-color: darken(@color-gray-light, 10%);
background-color: @color-back;
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.25);
cursor: move;
opacity: 0.9;
}
&.drag-from
{
background-color: @color-pale;
}
}
.board-list
{
.board-item:last-child {margin-bottom: 0;}
}
.board
{
float: left;
width: 250px;
margin-right: 10px;
&.drop-in-empty
{
.board-item-empty
{
height: 0; padding: 0; border: transparent; overflow: hidden; margin: 0;
}
}
&:last-child
{
margin-right: 0;
}
> .panel-body
{
padding: 5px;
background: @color-gray-pale;
}
}
.boards
{
.clearfix();
&.dragging
{
.board
{
&.drop-in
{
border-color: darken(@color-gray-light, 10%);
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.25);
.board-item-shadow {display: block;}
}
.board-item.board-item-empty {display: block;}
}
.board-item.disable-drop {display: none;}
}
&.drop-in
{
.board-item.drag-from {height: 0; padding: 0; border: transparent; overflow: hidden; margin: 0;}
}
}
src/less/zui.less
浏览文件 @ 8ee9277a
......@@ -91,6 +91,7 @@
@import "views/cards.condensed.less";
@import "views/cards.reveal.less";
@import "views/dashboard.less";
@import "views/boards.less";
//
// TESTS
......
views.html
浏览文件 @ 8ee9277a
......@@ -97,6 +97,7 @@ base_url: "./"
<li><a href="views.html#list">列表</a></li>
<li><a href="views.html#comment">评论</a></li>
<li><a href="views.html#dashboard">仪表盘</a></li>
<li><a href="views.html#boards">看板</a></li>
</ul>
<ul class="nav navbar-nav collapsed">
<li class="nav-heading">探索</li>
......@@ -2855,6 +2856,74 @@ base_url: "./"
</div>
</div>
</section>
<section id="boards">
<div class="page-header">
<h2>看板</h2>
</div>
<div class="example">
<div class="boards">
<div class="board panel">
<div class="panel-heading">
<strong>进行中</strong>
</div>
<div class="panel-body">
<div class="board-list">
<div class="board-item">
设计界面
</div>
<div class="board-item">
撰写文档
</div>
<div class="board-item">
紧急的任务
</div>
</div>
</div>
</div>
<div class="board panel">
<div class="panel-heading">
<strong>已完成</strong>
</div>
<div class="panel-body">
<div class="board-list">
<div class="board-item">
初步设计
</div>
<div class="board-item">
数据库设计
</div>
<div class="board-item">
需求整理
</div>
</div>
</div>
</div>
<div class="board panel">
<div class="panel-heading">
<strong>未完成</strong>
</div>
<div class="panel-body">
<div class="board-list">
<div class="board-item">
测试
</div>
<div class="board-item">
发布
</div>
<div class="board-item">
庆祝
</div>
<div class="disable-drop board-item">
不可拖拽
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="dist/js/jquery.js"></script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或