两列 portal 示例
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<style type="text/css">
body{
background: #fff;
}
</style>
<title>两列 portal 示例</title>
<style>
#cols {
width: 600px;
}
#leftCol, #rightCol {
margin-left: 20px;
float: left;
border: 1px solid red;
}
#rightCol {
border: 1px solid green;
}
.component {
width: 100px;
height: 100px;
margin: 50px;
border: 1px solid purple;
-ms-touch-action: none;
-ms-user-select: none;
}
.col .header {
border-bottom: 1px solid purple;
cursor: move;
}
.ks-dd-dragging *, .ks-dd-proxy * {
visibility: hidden;
}
.ks-dd-drop-over {
background: #ffff00;
}
.ks-dd-proxy,.ks-dd-dragging {
border: 2px blue dashed;
}
.ks-dd-proxy {
position: absolute;
left: -9999px;
top: -9999px;
}
</style>
</head>
<body>
<h1>两列 portal 示例</h1>
<p>
拖动组件头部或布局列的头部调整位置
</p>
<div id="cols">
<div id="leftCol" class="col" style=" width: 250px;height: 400px;">
<div class="header">
一列头部 drag me
</div>
<div class="component">
<div class="header">
组件头部 drag me
</div>
</div>
</div>
<div id="rightCol" class="col" style=" width: 250px;height: 400px;">
<div class="header">
二列头部 drag me
</div>
<div class="component">
<div class="header">
组件头部 drag me
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed-debug.js"></script>
<script>
require(['dd','util','node','dd/plugin/proxy','dd/plugin/scroll'], function (DD,util, Node, Proxy, Scroll) {
var DDM = DD.DDM,
$ = Node.all,
DraggableDelegate = DD.DraggableDelegate,
DroppableDelegate = DD.DroppableDelegate,
Draggable = DD.Draggable,
Droppable = DD.Droppable;
var proxy = new Proxy({
/**
* 如何产生替代节点
* @param drag 当前拖对象
*/
node: function (drag) {
var n = $(drag.get("dragNode").clone(true));
n.attr('id', util.guid("ks-dd-proxy"));
n.css("opacity", 0.2);
return n;
},
moveOnEnd: false,
destroyOnEnd: true
});
var dragDelegate = new DraggableDelegate({
container: "#cols",
move: 1,
handlers: ['.header'],
selector: function (el) {
el = $(el);
return el.hasClass('col') || el.hasClass('component');
}
});
dragDelegate.plug(proxy);
/**
* 一列也为可拖放节点，防止空列无法拖入
*/
new DroppableDelegate({
container: "#cols",
selector: '.col'
});
/**
* 单个 component 为可拖放节点
*/
new DroppableDelegate({
container: "#cols",
selector: '.component'
});
dragDelegate.on("dragover", function (ev) {
var drag = ev.drag;
var drop = ev.drop;
var dragNode = drag.get("dragNode"),
dropNode = drop.get("node");
if (dragNode.hasClass("component")) {
if (dropNode.hasClass("col")) {
var nodes = dropNode.all(".component");
if (nodes.length) {
if (nodes.length == 1 &&
( nodes[0] === drag.get("node")[0] &&
nodes[0] !== drag.get("dragNode")[0])
) {
// 只有 proxy
} else {
return;
}
}
//空列
dropNode.append(dragNode);
} else {
// 纵轴中线位置
var middleDropY = (dropNode.offset().top * 2 + dropNode.height()) / 2;
//当前鼠标位置
if (ev.pageY > middleDropY) {
var next = dropNode.next();
if (next && next[0] == dragNode) {
} else {
dragNode.insertAfter(dropNode);
}
} else {
var prev = dropNode.prev();
if (prev && prev[0] == dragNode) {
} else {
dragNode.insertBefore(dropNode);
}
}
}
}
// 列之间拖动
else if (dropNode.hasClass("col")) {
// 横轴中线位置
var middleDropX = (dropNode.offset().left * 2 + dropNode.width()) / 2;
//当前鼠标位置
if (ev.pageX > middleDropX) {
next = dropNode.next();
if (next && next[0] == dragNode) {
} else {
dragNode.insertAfter(dropNode);
}
} else {
prev = dropNode.prev();
if (prev && prev[0] == dragNode) {
} else {
dragNode.insertBefore(dropNode);
}
}
}
});
});
</script>
</body>
</html>