关注公众号:青山有路

dwz j-ui 表格内拖动排序后增加回调

js javascript jquery笔记 admin 5年前 (2019-10-17) 1215次浏览 已收录 扫描二维码

需要修改下js / dwz.min.js

(function($) {
var _op = {
cursor: ‘move’,
replace: false,
items: ‘> *’,
zIndex: 1000
};
var sortDrag = {
optionsfun: function(options) {
_op = $.extend({},
_op, options);
return _op;
},
start: 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({
selector: op.selector,
drag: this.drag,
stop: this.stop,
event: event
});
$item.before($placeholder).before($helper).hide();
return false;
},
drag: function(el, event) {
var $helper = $(arguments[0]),
$sortBox = $helper.data(‘$sortBox’),
$placeholder = $helper.data(‘$placeholder’);
var $items = $sortBox.find($helper.data(‘op’)[‘items’]).filter(‘:visible’).filter(‘:not(.sortDragPlaceholder, .sortDragHelper)’);
var helperPos = $helper.position(),
firstPos = $items.eq(0).position();
var $overBox = sortDrag._getOverSortBox($helper, event);
if ($overBox.length > 0 && $overBox[0] != $sortBox[0]) {
$helper.data(‘$sortBox’, $overBox);
} else {
for (var i = 0; i < $items.length; i++) {
var $this = $items.eq(i),
position = $this.position();
if (helperPos.top > position.top + 10) {
$this.after($placeholder);
} else if (helperPos.top <= position.top) {
$this.before($placeholder);
break;
}
}
}
},
stop: function() {
var $helper = $(arguments[0]),
$sortBox = $helper.data(‘$sortBox’),
$item = $helper.data(‘$item’),
$placeholder = $helper.data(‘$placeholder’);
var position = $placeholder.position();
$helper.animate({
top: (position.top + $sortBox.scrollTop()) + “px”,
left: position.left + “px”
},
{
complete: function() {
console.log(_op) alert(3411) if ($helper.data(‘op’)[‘replace’]) {
$srcBox = $item.parents(_op.sortBoxs + “:first”);
$destBox = $placeholder.parents(_op.sortBoxs + “:first”);
if ($srcBox[0] != $destBox[0]) {
$replaceItem = $placeholder.next();
if ($replaceItem.size() > 0) {
$replaceItem.insertAfter($item);
}
}
}
$item.insertAfter($placeholder).show();
$placeholder.remove();
$helper.remove();
if (typeof(_op.callback) === ‘function’) {
_op.callback();
}

},
duration: 300
});
},
_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’)
});
},
_getOverSortBox: function($item, e) {
var itemPos = $item.position();
var y = itemPos.top + ($item.height() / 2),
x = itemPos.left + ($item.width() / 2);
return $(_op.sortBoxs).filter(‘:visible’).filter(function() {
var $sortBox = $(this),
sortBoxPos = $sortBox.position(),
sortBoxH = $sortBox.height(),
sortBoxW = $sortBox.width();
return DWZ.isOver(y, x, sortBoxPos.top, sortBoxPos.left, sortBoxH, sortBoxW);
});
}
};
$.fn.sortDrag = function(options) {
return this.each(function() {
var op = $.extend({},
_op, options);
var $sortBox = $(this);
if ($sortBox.attr(‘selector’)) op.selector = $sortBox.attr(‘selector’);
$sortBox.find(op.items).each(function(i) {
var $item = $(this),
$selector = $item;
if (op.selector) {
$selector = $item.find(op.selector).css({
cursor: op.cursor
});
}
$selector.mousedown(function(event) {
sortDrag.optionsfun(options);
sortDrag.start($sortBox, $item, event, op);
event.preventDefault();

});
});
});
}
}

调用示例:

$(function() {
var options = {
cursor: ‘move’,
// selector 的鼠标手势
sortBoxs: ‘tbody’,
//拖动排序项父容器
replace: true,
//2个sortBox之间拖动替换
items: ‘> tr’,
//拖动排序项选择器
selector: ‘td:first’,
//拖动排序项用于拖动的子元素的选择器,为空时等于item
zIndex: 1000,
callback: saveOrder
};
// debugger;
$(‘tbody’, navTab.getCurrentPanel()).sortDrag(options);
function saveOrder() {
alert(45)
};
});

 


版权所有丨如未注明 , 均为原创 , 转载请注明dwz j-ui 表格内拖动排序后增加回调
喜欢 (0)