/**
* @author 张慧华 z@j-ui.com
*/
(function($){
DWZ.miscDrag = {
start:function($sortBox, $item, event, op){
var $helper = $item.clone();
var position = $item.position();
$helper.addClass('sortDragHelper').css({
position:'absolute',
top:position.top+$sortBox.scrollTop(),
left:position.left,
zIndex:op.zIndex,
minWidth:$item.width()+'px',
height:$item.height()+'px'
}).jDrag({
drag:this.drag,
stop:this.stop,
event:event
});
$helper.data('$sortBox', $sortBox);
$item.before($helper);
return false;
},
drag:function(el, event){
},
stop:function(el, event){
var $helper = $(arguments[0]),
$sortBox = $helper.data('$sortBox'),
$overBox = DWZ.miscDrag._getOverSortBox($sortBox.find($sortBox.attr('drag-rel')), $helper);
if ($overBox.length > 0){ //移动到指定容器
var $dragBox = $helper.appendTo($overBox).mousedown(function(event){
$(this).jDrag({event:event});
});
var txt = $dragBox.html(),
icon = $dragBox.attr('data-icon'),
sn = $dragBox.attr('data-sn'),
sequence = $overBox.find('> div').size();
var overBoxPos = $overBox.position(),
dragBoxPos = $dragBox.position();
var content = icon ? '
' : txt;
$dragBox.attr('data-sequence', sequence).html('
' + sequence + '
' + content).css({
height: 'auto',
top:(dragBoxPos.top - overBoxPos.top) + 'px',
left:(dragBoxPos.left - overBoxPos.left) + 'px'
});
var rel = $sortBox.attr('rel');
if (rel) {
$(''+sequence+'
').appendTo(rel);
}
} else {
$helper.remove();
}
},
_getOverSortBox:function($sortBox, $item){
var itemPos = $item.position();
var y = itemPos.top+($item.height()/2), x = itemPos.left+($item.width()/2);
return $sortBox.filter(':visible').filter(function(){
var $sortBox = $(this), sortBoxPos = $sortBox.offset(),
sortBoxH = $sortBox.height(), sortBoxW = $sortBox.width();
return DWZ.isOver(y, x, sortBoxPos.top, sortBoxPos.left, sortBoxH, sortBoxW);
});
},
_createPlaceholder:function($item){
return $('<'+$item[0].nodeName+' class="sortDragPlaceholder"/>').css({
// width:$item.outerWidth()+'px',
height:$item.outerHeight()+'px',
marginTop:$item.css('marginTop'),
marginRight:$item.css('marginRight'),
marginBottom:$item.css('marginBottom'),
marginLeft:$item.css('marginLeft')
});
},
startSortDrag:function($sortBox, $item, event, op){
var $placeholder = this._createPlaceholder($item);
var $helper = $item.clone();
var position = $item.position();
$helper.data('$sortBox', $sortBox).data('op', op).data('$item', $item).data('$placeholder', $placeholder);
$helper.addClass('sortDragHelper').css({
position:'absolute',
top:position.top+$sortBox.scrollTop(),
left:position.left,
zIndex:op.zIndex,
width:$item.width()+'px',
height:$item.height()+'px'
}).jDrag({
drag:this.dragSortDrag,
stop:this.stopSortDrag,
event:event
});
$item.before($helper).before($placeholder);
return false;
},
dragSortDrag:function(el, event){
var $helper = $(arguments[0]), $sortBox = $helper.data('$sortBox'),
$placeholder = $helper.data('$placeholder');
// 修复出现滚动条拖拽位置
var $unitBox = $helper.parents(".unitBox:first"),
position = $helper.offset();
$helper.css({
top:position.top+$unitBox.scrollTop()
});
var $dragList = $($sortBox.attr('drag-rel'));
for (var i=0; i<$dragList.size(); i++) {
var $overBox = DWZ.miscDrag._getOverSortBox($dragList.eq(i), $helper);
if ($overBox.length > 0 && $overBox[0] != $sortBox[0]){ //移动到其他容器
$placeholder.appendTo($overBox);
}
}
},
stopSortDrag:function(){
var $helper = $(arguments[0]), $sortBox = $helper.data('$sortBox'),
$placeholder = $helper.data('$placeholder'), $item = $helper.data('$item');
if ($placeholder && $placeholder.is(':visible')) {
var position = $placeholder.offset();
$helper.animate({
top: (position.top+$sortBox.scrollTop()) + "px",
left: position.left + "px"
},
{
complete: function(){
//复制到目标容器
var $destBox = $placeholder.parents(".sortDrag:first");
//var html = $helper.html()+'×';
var html = $helper.html();
$destBox.append(''+html+'
');
$placeholder.remove();
$helper.remove();
if ($sortBox.attr('data-duplicate') != 1) {$item.remove();}
//从新绑定sortDrag
$destBox.sortDrag({refresh:true});
},
duration: 300
}
);
} else {
$placeholder.remove();
$helper.remove();
}
}
};
$.fn.extend({
miscDrag: function(options){
var op = $.extend({
cursor: 'move', // selector 的鼠标手势
sortBoxs: 'div.miscDrag', //拖动排序项父容器
replace: false, //2个sortBox之间拖动替换
items: '> dt .dragBox', //拖动排序项选择器
zIndex: 1000
}, options);
return this.each(function(){
var $box = $(this);
$box.find(op.items).each(function(i){
var $item = $(this);
$item.mousedown(function(event){
DWZ.miscDrag.start($box, $item, event, op);
event.preventDefault();
});
});
});
},
miscDragData: function(){
var $miscDrag = $(this),
$miscSortDrag = $($miscDrag.attr('rel')),
$dragBoxList = $miscDrag.find('dd .dragBox'),
$sortDragList = $miscSortDrag.find('.sortDrag');
var data = [];
for (var i=0; i<$dragBoxList.size(); i++) {
var $dragBox = $dragBoxList.eq(i), $sortDrag = $sortDragList.eq(i),
$dragBoxPos = $dragBox.position();
var dataItem = {
sn: $dragBox.attr('data-sn'),
sequence: $dragBox.attr('data-sequence'),
top: parseInt($dragBoxPos.top),
left: parseInt($dragBoxPos.left),
items: []
};
$sortDrag.find('.dragItem').each(function(index){
var $dragItem = $(this),
$dragItemPos = $dragItem.position();
dataItem.items.push({
sn: $dragItem.attr('data-sn'),
sequence: index + 1
});
});
data.push(dataItem)
}
return data;
},
miscSortDragData: function(){
var $miscSortDrag = $(this),
$sortDragList = $miscSortDrag.find('.sortDrag');
var data = [];
for (var i=0; i<$sortDragList.size(); i++) {
var $sortDrag = $sortDragList.eq(i)
var dataItem = {
sn: $sortDrag.attr('data-sn'),
name: $sortDrag.attr('data-name') || '',
sequence: i+1,
items: []
};
$sortDrag.find('.dragItem').each(function(index){
var $dragItem = $(this);
var itemData = {
sn: $dragItem.attr('data-sn'),
name: $dragItem.attr('data-name') || '',
sequence: index + 1
};
$dragItem.find('.ctl-label :checkbox').each(function(){
var $lable = $(this), lableName = $lable.attr('name');
if (lableName) {
itemData[lableName] = $lable.is(":checked");
}
});
dataItem.items.push(itemData);
});
data.push(dataItem);
}
return data;
},
miscSortDrag: function(options){
var op = $.extend({
cursor: 'move', // selector 的鼠标手势
sortBoxs: 'dl.miscSortDrag', //拖动排序项父容器
replace: false, //2个sortBox之间拖动替换
items: '> dt .dragItem', //拖动排序项选择器
zIndex: 1000
}, options);
return this.each(function(){
var $sortBox = $(this);
$sortBox.find(op.items).each(function(i){
var $item = $(this);
$item.mousedown(function(event){
DWZ.miscDrag.startSortDrag($sortBox, $item, event, op);
event.preventDefault();
});
});
});
}
});
})(jQuery);