Skip to content

Z
zui

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

通知 6
Star 0
Fork 1
Z
zui

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

提交 35e4a2fa 编写于 作者: C Catouse
浏览文件
操作

* support mutiple targets to drop in in droppable.js.

上级 5b904a18
隐藏空白更改
内联 并排
Showing with 104 addition and 53 deletion
assets/js/doc.js
浏览文件 @ 35e4a2fa
...@@ -119,16 +119,23 @@ $(function() ...@@ -119,16 +119,23 @@ $(function()
{ {
start: function() start: function()
{ {
$('#droppableTarget').removeClass('panel-warning').removeClass('panel-success').find('.panel-heading').text('拖动到这里。'); $('.droppable-target').removeClass('panel-warning').removeClass('panel-success').find('.panel-heading').text('拖动到这里。');
}, },
drop: function() drop: function(event, target)
{ {
messager.show('真棒！'); messager.show('真棒！');
$('#droppableTarget').addClass('panel-success').find('.panel-heading').text('成功拖到目的地。'); $('.droppable-target').removeClass('panel-success').removeClass('panel-warning');
if(target)
{
target.addClass('panel-success').find('.panel-heading').text('成功拖到目的地。');
}
}, },
drag: function(event, isIn) drag: function(event, isIn, target)
{ {
$('#droppableTarget').toggleClass('panel-warning', isIn);
$('.droppable-target').removeClass('panel-success').removeClass('panel-warning');
console.log(isIn);
if(target) target.addClass('panel-warning');
} }
}); });
}); });
dist/js/zui.min.js
浏览文件 @ 35e4a2fa
...@@ -2314,7 +2314,8 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") } ...@@ -2314,7 +2314,8 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
if (isSure != undefined && (!isSure)) return; if (isSure != undefined && (!isSure)) return;
} }
var $target = $(setting.target), var $targets = $(setting.target),
target = null,
$container = $(setting.container), $container = $(setting.container),
pos = $e.offset(), pos = $e.offset(),
isIn = false; isIn = false;
...@@ -2337,55 +2338,68 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") } ...@@ -2337,55 +2338,68 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
function mouseMove(event) function mouseMove(event)
{ {
var tPos = $target.offset();
var mX = event.pageX, var mX = event.pageX,
mY = event.pageY, mY = event.pageY;
tX = tPos.left,
tY = tPos.top,
tW = $target.width(),
tH = $target.height();
$e.removeClass('drag-start').addClass('dragging'); $e.removeClass('drag-start').addClass('dragging');
shadow.addClass('dragging').css( shadow.addClass('dragging').css(
{ {
left : event.pageX-startOffset.x, left : event.pageX-startOffset.x,
top : event.pageY-startOffset.y top : event.pageY-startOffset.y
}); });
isIn = (mX > tX && mY > tY && mX < (tX + tW) && mY < (tY + tH)); isIn = false;
$target.toggleClass('drop-in', isIn); var idx = -1;
shadow.toggleClass('drop-in', isIn); $targets.removeClass('drop-in').each(function(index, el)
{
var t = $(this);
var tPos = t.offset();
var tW = t.width(),
tH = t.height(),
tX = tPos.left,
tY = tPos.top;
if(mX > tX && mY > tY && mX < (tX + tW) && mY < (tY + tH))
{
isIn = true;
target = t;
idx = index;
t.addClass('drop-in');
return false;
}
});
$e.toggleClass('drop-in', isIn); $e.toggleClass('drop-in', isIn);
shadow.toggleClass('drop-in', isIn);
if(setting.hasOwnProperty('drag') && $.isFunction(setting['drag'])) if(setting.hasOwnProperty('drag') && $.isFunction(setting['drag']))
{ {
setting['drag'](event, isIn); setting['drag'](event, isIn, target, idx);
} }
} }
function mouseUp(event) function mouseUp(event)
{ {
if(!isIn) target = null;
var isSure = true;
if(setting.hasOwnProperty('beforeDrop') && $.isFunction(setting['beforeDrop'])) if(setting.hasOwnProperty('beforeDrop') && $.isFunction(setting['beforeDrop']))
{ {
setting['beforeDrop'](event, isIn); var isSure = setting['beforeDrop'](event, isIn, target);
if (isSure != undefined && (!isSure)) isSure = false;
else isSure = true;
} }
if(isIn && setting.hasOwnProperty('drop') && $.isFunction(setting['drop'])) if(isSure && isIn && setting.hasOwnProperty('drop') && $.isFunction(setting['drop']))
{ {
setting['drop'](event); setting['drop'](event, target);
} }
$(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp); $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
$target.removeClass('drop-in'); $targets.removeClass('drop-in');
$e.removeClass('dragging'); $e.removeClass('dragging');
shadow.remove(); shadow.remove();
if(setting.hasOwnProperty('afterDrop') && $.isFunction(setting['afterDrop']))
{
setting['afterDrop'](event, isIn);
}
event.preventDefault(); event.preventDefault();
} }
}); });
......
javascript.html
浏览文件 @ 35e4a2fa
...@@ -2122,16 +2122,30 @@ base_url: "./" ...@@ -2122,16 +2122,30 @@ base_url: "./"
<div class="example"> <div class="example">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-3">
<div class="panel"> <div class="panel">
<div class="panel-heading">开始吧</div> <div class="panel-heading">开始吧</div>
<div class="panel-body" style="height: 100px"> <div class="panel-body" style="height: 100px">
<button type="button" class='btn btn-danger btn-lg' data-toggle='droppable' data-target='#droppableTarget'>拖动我</button> <button type="button" class='btn btn-danger btn-lg' data-toggle='droppable' data-target='.droppable-target'>拖动我</button>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-3">
<div class="panel" id='droppableTarget'> <div class="panel droppable-target">
<div class="panel-heading">拖到这里</div>
<div class="panel-body" style="height: 100px">
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel droppable-target">
<div class="panel-heading">拖到这里</div>
<div class="panel-body" style="height: 100px">
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel droppable-target">
<div class="panel-heading">拖到这里</div> <div class="panel-heading">拖到这里</div>
<div class="panel-body" style="height: 100px"> <div class="panel-body" style="height: 100px">
</div> </div>
......
src/apps/ranzhi/js/zui.js
浏览文件 @ 35e4a2fa
...@@ -26,3 +26,5 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") } ...@@ -26,3 +26,5 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
// @koala-append "../../../js/string.js" // @koala-append "../../../js/string.js"
// @koala-append "../../../js/date.js" // @koala-append "../../../js/date.js"
// @koala-append "../../../js/resize.js" // @koala-append "../../../js/resize.js"
//
// @koala-append "../../../js/droppable.js"
src/js/droppable.js
浏览文件 @ 35e4a2fa
...@@ -38,7 +38,8 @@ ...@@ -38,7 +38,8 @@
if (isSure != undefined && (!isSure)) return; if (isSure != undefined && (!isSure)) return;
} }
var $target = $(setting.target), var $targets = $(setting.target),
target = null,
$container = $(setting.container), $container = $(setting.container),
pos = $e.offset(), pos = $e.offset(),
isIn = false; isIn = false;
...@@ -61,55 +62,68 @@ ...@@ -61,55 +62,68 @@
function mouseMove(event) function mouseMove(event)
{ {
var tPos = $target.offset();
var mX = event.pageX, var mX = event.pageX,
mY = event.pageY, mY = event.pageY;
tX = tPos.left,
tY = tPos.top,
tW = $target.width(),
tH = $target.height();
$e.removeClass('drag-start').addClass('dragging'); $e.removeClass('drag-start').addClass('dragging');
shadow.addClass('dragging').css( shadow.addClass('dragging').css(
{ {
left : event.pageX-startOffset.x, left : event.pageX-startOffset.x,
top : event.pageY-startOffset.y top : event.pageY-startOffset.y
}); });
isIn = (mX > tX && mY > tY && mX < (tX + tW) && mY < (tY + tH)); isIn = false;
$target.toggleClass('drop-in', isIn); var idx = -1;
shadow.toggleClass('drop-in', isIn); $targets.removeClass('drop-in').each(function(index, el)
{
var t = $(this);
var tPos = t.offset();
var tW = t.width(),
tH = t.height(),
tX = tPos.left,
tY = tPos.top;
if(mX > tX && mY > tY && mX < (tX + tW) && mY < (tY + tH))
{
isIn = true;
target = t;
idx = index;
t.addClass('drop-in');
return false;
}
});
$e.toggleClass('drop-in', isIn); $e.toggleClass('drop-in', isIn);
shadow.toggleClass('drop-in', isIn);
if(setting.hasOwnProperty('drag') && $.isFunction(setting['drag'])) if(setting.hasOwnProperty('drag') && $.isFunction(setting['drag']))
{ {
setting['drag'](event, isIn); setting['drag'](event, isIn, target, idx);
} }
} }
function mouseUp(event) function mouseUp(event)
{ {
if(!isIn) target = null;
var isSure = true;
if(setting.hasOwnProperty('beforeDrop') && $.isFunction(setting['beforeDrop'])) if(setting.hasOwnProperty('beforeDrop') && $.isFunction(setting['beforeDrop']))
{ {
setting['beforeDrop'](event, isIn); var isSure = setting['beforeDrop'](event, isIn, target);
if (isSure != undefined && (!isSure)) isSure = false;
else isSure = true;
} }
if(isIn && setting.hasOwnProperty('drop') && $.isFunction(setting['drop'])) if(isSure && isIn && setting.hasOwnProperty('drop') && $.isFunction(setting['drop']))
{ {
setting['drop'](event); setting['drop'](event, target);
} }
$(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp); $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
$target.removeClass('drop-in'); $targets.removeClass('drop-in');
$e.removeClass('dragging'); $e.removeClass('dragging');
shadow.remove(); shadow.remove();
if(setting.hasOwnProperty('afterDrop') && $.isFunction(setting['afterDrop']))
{
setting['afterDrop'](event, isIn);
}
event.preventDefault(); event.preventDefault();
} }
}); });
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或