基于yui3的qzone空间拖动效果
[html]
<!doctype html>
<html>
<head>
<title>textbox</title>
<meta name="description" content="textbox" />
<meta name="keywords" content="textbox" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/reset.css" rel="stylesheet" />
<link href="css/grids.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
</head><body>
<div id="page" class="w950">
<div id="header">header</div>
<div id="container" class="layout mode-col-221">
<div id="frame-col-0" class="frames col-l clear-fix"><div id="module_0" class="module">let me try</div></div>
<div id="frame-col-1" class="frames col-m"><div id="module_1" class="module"></div><div id="module_2" class="module">鼠标放上来拖啊，让我们大家一起拖啊拖啊拖</div></div>
<div id="frame-col-2" class="frames col-r clear-fix"><div id="module_3" class="module">let me try textbox</div><div id="module_4" class="module">let me try</div></div>
</div>
<div id="footer">footer</div>
</div>
<script type="text/javascript" src="js/yui-min.js"></script>
<script type="text/javascript" src="js/yui-moldle-dd.js"></script>
</body></html>
[/html]
[javascript]
YUI({combine: true}).use('dd-drop', 'dd-drag', 'dd-proxy', function (Y) {
var drop = Y.all('.module').each(function (node, index) {
var dragGhost = new Y.DD.Drag({node: node,startCentered: true}).plug(Y.Plugin.DDProxy);
dragGhost.on('drag:start', function (e) {
this.get('dragNode').setStyles({height: '20px',width: '140px',backgroundColor: 'blue',color: '#fff'}).set('innerHTML', '使劲我拖我');
dragGhost.frames = [];
var cNodes = Y.all('.frames')._nodes;
for (var i = 0; i < cNodes.length; i++) {
var ySelf = Y.one(cNodes[i]);
dragGhost.frames.push({
id: cNodes[i].id,
xy: ySelf.getXY(),
size: [parseInt(ySelf.getStyle('width')), parseInt(ySelf.getStyle('height'))]
});
}//end for
})
dragGhost.on('drag:drag', function (e) {
var cX = e.pageX,
cY = e.pageY;
_fs = dragGhost.frames;
var _sl = Math.max(document.documentElement.scrollLeft, Y.config.doc.body.scrollLeft);
var _st = Math.max(document.documentElement.scrollTop, Y.config.doc.body.scrollTop);
var _frameId = 2;
for (var i = 0; i < _fs.length; i++) {
_frameId = i; //动态变换
//如果前鼠标坐标 < 第i个frame 的坐标 x + 第i个frame的宽度，说明它就在这个范围内
if (cX < _fs[i].xy[0] + _fs[i].size[0]) {
break;
}
}
//当前目标frame
var _targetFrame = Y.get('#' + _fs[_frameId].id)._node;
//默认把第一个节点当做当前霸占对象
var _cNode = _targetFrame.firstChild;
//点到 框架 最左边的长度 加上 滚动条滚动的长度
var _fX = cX - _fs[_frameId].xy[0] + _sl;
//点到 框架 最上边的长度 加上 滚动条滚动的高度
var _fY = cY - _fs[_frameId].xy[1] + _st;
var _next = null;
while (_cNode != null && (_next = _cNode.nextSibling) != null) {
if (_cNode.nodeType != 1) {
_cNode = _next;
continue;
}
if (_fY < _cNode.offsetTop + _cNode.offsetHeight) {
break;
}
_cNode = _next;
}
if (_cNode) {
var pos = [{id: 0,value: _fY - _cNode.offsetTop},{id: 1,value: _fX - _cNode.offsetLeft},{id: 2,value: _cNode.offsetTop + _cNode.offsetHeight - _fY},{id: 3,value: _cNode.offsetLeft + _cNode.offsetWidth - _fX}];
pos = pos.sort(function (a, b) {return a.value - b.value;});
dragGhost.shortPathId = pos[0].id;
}
//当前碰到的节点.有可能是自己
dragGhost.currentNode = _cNode;
dragGhost.mainElement = this.get('node');
dragGhost.currentFrameId = _frameId;
showFrameBar(dragGhost, Y);
})
dragGhost.on('drag:end', function (e) {
var _parentEl = Y.get('#' + dragGhost.frames[dragGhost.currentFrameId].id);
if (dragGhost.currentNode) {
if (dragGhost.mainElement.id != dragGhost.currentNode.id) {
if (dragGhost.shortPathId < 2) {
_parentEl.insertBefore(dragGhost.mainElement,dragGhost.currentNode).setStyles({left: 0,top: 0});
} else {
_parentEl.insertBefore(dragGhost.mainElement,dragGhost.currentNode.nextSibling).setStyles({left: 0,top: 0});
}
} else {
_changeFlag = false;
}
} else {
_parentEl.append(this.get('node').setStyles({left: 0,top: 0}));
}
Y.get('#fTipsBar').remove();
})
})
});
var showFrameBar = function(dragCache, Y) {
var tipsBar = Y.get("#fTipsBar") || Y.get('body').appendChild(Y.Node.create('<div id="fTipsBar" style="font:0;background:red;position:absolute"></div>'));
var _fix = {
l: [0, -5, 0, 1],
t: [-5, 0, 1, 0]
};
if (dragCache.currentNode) {//start if
var ySelf = Y.one(dragCache.currentNode);
var _p = {
"top": ySelf.getXY()[1],
"left": ySelf.getXY()[0],
"width": parseInt(ySelf.getStyle('width')),
"height": parseInt(ySelf.getStyle('height'))
};
var _spi = dragCache.shortPathId;
var _x = (_spi != 3 ? _p.left : (_p.left + _p.width)) + _fix.l[_spi] + (Y.UA.gecko == 1.9 ? 2 : 0);
var _y = (_spi != 2 ? _p.top : (_p.top + _p.height)) + _fix.t[_spi] + (Y.UA.gecko == 1.9 ? 2 : 0);
tipsBar.setXY([_x, _y]);
tipsBar.setStyles({
width: (_spi % 2 ? 4 : _p.width) + 'px',
height: (_spi % 2 ? _p.height : 4) + 'px'
})
} else {//else
var _parentEl = Y.get('#' + dragCache.frames[dragCache.currentFrameId].id);
var _p = {
"top": _parentEl.getXY()[1],
"left": _parentEl.getXY()[0],
"width": parseInt(_parentEl.getStyle('width')),
"height": parseInt(_parentEl.getStyle('height'))
};
tipsBar.setXY([_p.left, _p.top]);
tipsBar.setStyles({
width: _p.width + 'px',
height: 4 + 'px'
})
}//end if
};
[/javascript]
演示页面:http://www.7hihi.com/dd/yui-moudle-dd.html
