拖拽效果

//拖拽生成form table
var UCD = UCD || { Core: jQuery };

(function(NS) {
var hasClone = false;// 解決拖動速度過快鼠標脫離拖拽元素觸發mouseover

//構造函數
function DragField(options) {
this.settings = $.extend({
dragContainer: null, // 被拖拽元素的容器
targetContainer: null, // 被拖拽元素的目標容器
iconContainer: null,
handleDrag: "hlds-icon-drag", // 被拖拽的操做區（此處沒用，直接拖動的li）
handleSelect: "hlds-icon-status", // 點擊直接添加到右側的class
replaceElementParent: "", // 每一個坑位對應替換的模板容器
cloneClass: "hlds-clone-field",

selectedClass: "hlds-selected",
hoverClass: "hlds-hover",
hideClass: "hlds-hide",
disabledClass: "hlds-disabled",
isMovingClass: "hlds-is-moving",
dragItemClass: "field-type-item" ,
targetItemClass: "hlds-target-item" ,
fieldOverParent: "field-type-is-draging",
replaceClass: "hlds-replace-item",

}, options || {});

this.init();
}

DragField.prototype = {
//初始化
init: function() {
var _this = this;
_this.dragContainer = $("." + _this.settings.dragContainer);
_this.targetContainer = $("." + _this.settings.targetContainer);
_this.currentTargetContainer = null;
_this.replaceElementParent = $("." + _this.settings.replaceElementParent);
_this.clone = null;
_this.currentItem = null;
_this.oppositeX = 0;
_this.oppositeY = 0;
_this.body = $("body");

_this.bindEvent()

},
bindEvent: function(){
//拖拽
var _this = this;
_this.dragContainer.children().each(function(){
var $this = $(this)
$this.off().on("mousedown", {obj:_this}, _this.handleDragMouseDown);
$this.find("img").off().on("mousedown",function(ev){
ev.preventDefault();
}).on("mousemove",function(ev){
ev.preventDefault();
})
})

_this.body.on("mouseover", "." + _this.settings.targetContainer, {obj:_this}, _this.targetContainerMouseOver)
_this.body.on("mouseout", "." + _this.settings.targetContainer, {obj:_this}, _this.targetContainerMouseOut)

$(document).on("mousemove", $.proxy(_this.documentMouseMove, _this));
$(document).on("mouseup", $.proxy(_this.documentMouseUp, _this));
},
handleDragMouseDown: function(e) {
var _this = e.data.obj,
$this = $(this);
if($this.hasClass(_this.settings.selectedClass)) return false;

var cardWidth = $this.outerWidth(),
cardHeight = $this.outerHeight(),
offset = $this.offset();
_this.currentItem = $this;
_this.oppositeX = e.clientX - offset.left;
_this.oppositeY = e.clientY - offset.top;

_this.clone = $this.clone().addClass(_this.settings.cloneClass);
_this.clone.prependTo(_this.body)
_this.clone.css({
'left': e.clientX - _this.oppositeX,
'top': e.clientY - _this.oppositeY,
'width': cardWidth,
'height': cardHeight
});

_this.currentItem.addClass(_this.settings.isMovingClass)
_this.targetContainer.children("." + _this.settings.targetItemClass).removeClass("hlds-selected")

hasClone = true;
// return false
},
documentMouseMove: function(e) {
var _this = this;
if(!_this.clone) return false;
_this.clone.css({
'left': e.clientX - _this.oppositeX,
'top': e.clientY - _this.oppositeY,
'opacity': 1
});

// 目標容器
_this.targetContainer.each(function(){
var $this = $(this);
if(_this.crashTest(_this.clone, $this)){
$this.addClass(_this.settings.hoverClass).siblings().removeClass(_this.settings.hoverClass)
$this.closest(".hlds-handler-wrapper").siblings(".hlds-handler-wrapper").find(".hlds-handler-item-users").removeClass(_this.settings.hoverClass)
_this.currentTargetContainer = $this;
return false;
}
else{
if(_this.currentTargetContainer){
_this.currentTargetContainer.removeClass(_this.settings.hoverClass)
}
}
})
},
documentMouseUp: function(e) {
var _this = this;
if(!_this.clone || !_this.currentTargetContainer) {
if(_this.clone){
_this.clone.remove();
}
return
}

if (_this.crashTest(_this.clone, _this.currentTargetContainer)){
_this.addItem();
}
_this.currentItem.removeClass(_this.settings.isMovingClass)
_this.targetContainer.removeClass(_this.settings.hoverClass)

_this.clone.remove()
_this.clone = null;
hasClone = false;
},
addItem: function(){
var _this = this,
$replaceElement = _this.replaceElementParent.children().clone(),
$iconContainer = _this.currentTargetContainer.find("."+_this.settings.iconContainer),
hanlderid = _this.clone.attr("hanlderid"),
isExit = false;
$replaceElement.attr("hanlderid",hanlderid)
if(_this.currentTargetContainer.hasClass(_this.settings.disabledClass)){
return;
}

$replaceElement.html(_this.clone.html())
$iconContainer.html($replaceElement)

var $default = $iconContainer.children().eq(0)
if($default.hasClass("hlds-default")){
$default.remove()
}
},
targetItemClick: function(e){
var $this = $(this),
_this = e.data.obj;
_this.targetContainer.children("." + _this.settings.targetItemClass).removeClass("hlds-selected")
$this.addClass("hlds-selected").removeClass("hlds-hover")
},
targetContainerMouseOver: function(e){
var $this = $(this),
_this = e.data.obj;
if(hasClone) return false;
$this.addClass(_this.settings.hoverClass)
},
targetContainerMouseOut: function(e){
var $this = $(this),
_this = e.data.obj;
$this.removeClass(_this.settings.hoverClass)
},
targetItemMouseOver: function(e){
var $this = $(this);
$this.addClass("hlds-hover")
},
targetItemMouseOut: function(e){
var $this = $(this);
$this.removeClass("hlds-hover")
},
crashTest: function(obj1, obj2) {
var offset1 = obj1.offset(),
offset2 = obj2.offset();
var L1 = offset1.left;
var R1 = offset1.left + obj1.innerWidth();
var T1 = offset1.top;
var B1 = offset1.top + obj1.innerHeight();

var L2 = offset2.left;
var R2 = offset2.left + obj2.innerWidth();
var T2 = offset2.top;
var B2 = offset2.top + obj2.innerHeight();

if (R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2) {
return false;
} else {
return true;
}
}
};
NS.DragField = DragField;
})(UCD);

 

//拖拽 new UCD.DragField({ dragContainer: "hlds-all-handles", //被拖拽元素所在的容器 targetContainer: "hlds-handler-item-users", //拖拽釋放的目標容器 iconContainer: "hlds-handler-users", replaceElementParent: "hlds-replace-items" //釋放後的替換模板 });