354 lines
11 KiB
JavaScript
354 lines
11 KiB
JavaScript
/**
|
||
* jQuery ligerUI 1.3.2
|
||
*
|
||
* http://ligerui.com
|
||
*
|
||
* Author daomi 2015 [ gd_star@163.com ]
|
||
*
|
||
*/
|
||
|
||
(function ($)
|
||
{
|
||
var l = $.ligerui;
|
||
|
||
$.fn.ligerDrag = function (options)
|
||
{
|
||
return l.run.call(this, "ligerDrag", arguments,
|
||
{
|
||
idAttrName: 'ligeruidragid', hasElement: false, propertyToElemnt: 'target'
|
||
}
|
||
);
|
||
};
|
||
|
||
$.fn.ligerGetDragManager = function ()
|
||
{
|
||
return l.run.call(this, "ligerGetDragManager", arguments,
|
||
{
|
||
idAttrName: 'ligeruidragid', hasElement: false, propertyToElemnt: 'target'
|
||
});
|
||
};
|
||
|
||
$.ligerDefaults.Drag = {
|
||
onStartDrag: false,
|
||
onDrag: false,
|
||
onStopDrag: false,
|
||
handler: null,
|
||
//鼠标按下再弹起，如果中间的间隔小于[dragDelay]毫秒，那么认为是点击，不会进行拖拽操作
|
||
clickDelay : 100,
|
||
//代理 拖动时的主体,可以是'clone'或者是函数,放回jQuery 对象
|
||
proxy: true,
|
||
revert: false,
|
||
animate: true,
|
||
onRevert: null,
|
||
onEndRevert: null,
|
||
//接收区域 jQuery对象或者jQuery选择字符
|
||
receive: null,
|
||
//进入区域
|
||
onDragEnter: null,
|
||
//在区域移动
|
||
onDragOver: null,
|
||
//离开区域
|
||
onDragLeave: null,
|
||
//在区域释放
|
||
onDrop: null,
|
||
disabled: false,
|
||
proxyX: null, //代理相对鼠标指针的位置,如果不设置则对应target的left
|
||
proxyY: null
|
||
};
|
||
|
||
|
||
l.controls.Drag = function (options)
|
||
{
|
||
l.controls.Drag.base.constructor.call(this, null, options);
|
||
};
|
||
|
||
l.controls.Drag.ligerExtend(l.core.UIComponent, {
|
||
__getType: function ()
|
||
{
|
||
return 'Drag';
|
||
},
|
||
__idPrev: function ()
|
||
{
|
||
return 'Drag';
|
||
},
|
||
_render: function ()
|
||
{
|
||
var g = this, p = this.options;
|
||
this.set(p);
|
||
g.cursor = "move";
|
||
g.handler.css('cursor', g.cursor);
|
||
g.mouseDowned = false;
|
||
g.handler.bind('mousedown.drag', function (e)
|
||
{
|
||
if (p.disabled) return;
|
||
if (e.button == 2) return;
|
||
g.mouseDowned = true;
|
||
$(document).bind("selectstart.drag", function () { return false; });
|
||
setTimeout(function ()
|
||
{
|
||
//如果过了N毫秒,鼠标还没有弹起来，才认为是启动drag
|
||
if (g.mouseDowned)
|
||
{
|
||
g._start.call(g, e);
|
||
}
|
||
}, p.clickDelay || 100);
|
||
}).bind('mousemove.drag', function ()
|
||
{
|
||
if (p.disabled) return;
|
||
g.handler.css('cursor', g.cursor);
|
||
}).bind('mouseup.drag', function ()
|
||
{
|
||
$(document).unbind("selectstart.drag");
|
||
});
|
||
|
||
$(document).bind('mouseup', function ()
|
||
{
|
||
g.mouseDowned = false;
|
||
});
|
||
},
|
||
_rendered: function ()
|
||
{
|
||
this.options.target.ligeruidragid = this.id;
|
||
},
|
||
_start: function (e)
|
||
{
|
||
var g = this, p = this.options;
|
||
if (g.reverting) return;
|
||
if (p.disabled) return;
|
||
g.current = {
|
||
target: g.target,
|
||
left: g.target.offset().left,
|
||
top: g.target.offset().top,
|
||
startX: e.pageX || e.screenX,
|
||
startY: e.pageY || e.clientY
|
||
};
|
||
if (g.trigger('startDrag', [g.current, e]) == false) return false;
|
||
g.cursor = "move";
|
||
g._createProxy(p.proxy, e);
|
||
//代理没有创建成功
|
||
if (p.proxy && !g.proxy) return false;
|
||
(g.proxy || g.handler).css('cursor', g.cursor);
|
||
$(document).bind('mousemove.drag', function ()
|
||
{
|
||
g._drag.apply(g, arguments);
|
||
});
|
||
l.draggable.dragging = true;
|
||
$(document).bind('mouseup.drag', function ()
|
||
{
|
||
l.draggable.dragging = false;
|
||
g._stop.apply(g, arguments);
|
||
});
|
||
},
|
||
_drag: function (e)
|
||
{
|
||
var g = this, p = this.options;
|
||
if (!g.current) return;
|
||
var pageX = e.pageX || e.screenX;
|
||
var pageY = e.pageY || e.screenY;
|
||
g.current.diffX = pageX - g.current.startX;
|
||
g.current.diffY = pageY - g.current.startY;
|
||
(g.proxy || g.handler).css('cursor', g.cursor);
|
||
if (g.receive)
|
||
{
|
||
g.receive.each(function (i, obj)
|
||
{
|
||
var receive = $(obj);
|
||
var xy = receive.offset();
|
||
if (pageX > xy.left && pageX < xy.left + receive.width()
|
||
&& pageY > xy.top && pageY < xy.top + receive.height())
|
||
{
|
||
if (!g.receiveEntered[i])
|
||
{
|
||
g.receiveEntered[i] = true;
|
||
g.trigger('dragEnter', [obj, g.proxy || g.target, e]);
|
||
}
|
||
else
|
||
{
|
||
g.trigger('dragOver', [obj, g.proxy || g.target, e]);
|
||
}
|
||
}
|
||
else if (g.receiveEntered[i])
|
||
{
|
||
g.receiveEntered[i] = false;
|
||
g.trigger('dragLeave', [obj, g.proxy || g.target, e]);
|
||
}
|
||
});
|
||
}
|
||
if (g.hasBind('drag'))
|
||
{
|
||
if (g.trigger('drag', [g.current, e]) != false)
|
||
{
|
||
g._applyDrag();
|
||
}
|
||
else
|
||
{
|
||
if (g.proxy)
|
||
{
|
||
g._removeProxy();
|
||
} else
|
||
{
|
||
g._stop();
|
||
}
|
||
}
|
||
}
|
||
else
|
||
{
|
||
g._applyDrag();
|
||
}
|
||
},
|
||
_stop: function (e)
|
||
{
|
||
var g = this, p = this.options;
|
||
$(document).unbind('mousemove.drag');
|
||
$(document).unbind('mouseup.drag');
|
||
$(document).unbind("selectstart.drag");
|
||
if (g.receive)
|
||
{
|
||
g.receive.each(function (i, obj)
|
||
{
|
||
if (g.receiveEntered[i])
|
||
{
|
||
g.trigger('drop', [obj, g.proxy || g.target, e]);
|
||
}
|
||
});
|
||
}
|
||
if (g.proxy)
|
||
{
|
||
if (p.revert)
|
||
{
|
||
if (g.hasBind('revert'))
|
||
{
|
||
if (g.trigger('revert', [g.current, e]) != false)
|
||
g._revert(e);
|
||
else
|
||
g._removeProxy();
|
||
}
|
||
else
|
||
{
|
||
g._revert(e);
|
||
}
|
||
}
|
||
else
|
||
{
|
||
g._applyDrag(g.target);
|
||
g._removeProxy();
|
||
}
|
||
}
|
||
g.cursor = 'move';
|
||
g.trigger('stopDrag', [g.current, e]);
|
||
g.current = null;
|
||
g.handler.css('cursor', g.cursor);
|
||
},
|
||
_revert: function (e)
|
||
{
|
||
var g = this;
|
||
g.reverting = true;
|
||
g.proxy.animate({
|
||
left: g.current.left,
|
||
top: g.current.top
|
||
}, function ()
|
||
{
|
||
g.reverting = false;
|
||
g._removeProxy();
|
||
g.trigger('endRevert', [g.current, e]);
|
||
g.current = null;
|
||
});
|
||
},
|
||
_applyDrag: function (applyResultBody)
|
||
{
|
||
var g = this, p = this.options;
|
||
applyResultBody = applyResultBody || g.proxy || g.target;
|
||
var cur = {}, changed = false;
|
||
var noproxy = applyResultBody == g.target;
|
||
if (g.current.diffX)
|
||
{
|
||
if (noproxy || p.proxyX == null)
|
||
cur.left = g.current.left + g.current.diffX;
|
||
else
|
||
cur.left = g.current.startX + p.proxyX + g.current.diffX;
|
||
changed = true;
|
||
}
|
||
if (g.current.diffY)
|
||
{
|
||
if (noproxy || p.proxyY == null)
|
||
cur.top = g.current.top + g.current.diffY;
|
||
else
|
||
cur.top = g.current.startY + p.proxyY + g.current.diffY;
|
||
changed = true;
|
||
}
|
||
if (applyResultBody == g.target && g.proxy && p.animate)
|
||
{
|
||
g.reverting = true;
|
||
applyResultBody.animate(cur, function ()
|
||
{
|
||
g.reverting = false;
|
||
});
|
||
}
|
||
else
|
||
{
|
||
applyResultBody.css(cur);
|
||
}
|
||
},
|
||
_setReceive: function (receive)
|
||
{
|
||
this.receiveEntered = {};
|
||
if (!receive) return;
|
||
if (typeof receive == 'string')
|
||
this.receive = $(receive);
|
||
else
|
||
this.receive = receive;
|
||
},
|
||
_setHandler: function (handler)
|
||
{
|
||
var g = this, p = this.options;
|
||
if (!handler)
|
||
g.handler = $(p.target);
|
||
else
|
||
g.handler = (typeof handler == 'string' ? $(handler, p.target) : handler);
|
||
},
|
||
_setTarget: function (target)
|
||
{
|
||
this.target = $(target);
|
||
},
|
||
_setCursor: function (cursor)
|
||
{
|
||
this.cursor = cursor;
|
||
(this.proxy || this.handler).css('cursor', cursor);
|
||
},
|
||
_createProxy: function (proxy, e)
|
||
{
|
||
if (!proxy) return;
|
||
var g = this, p = this.options;
|
||
if (typeof proxy == 'function')
|
||
{
|
||
g.proxy = proxy.call(this.options.target, g, e);
|
||
}
|
||
else if (proxy == 'clone')
|
||
{
|
||
g.proxy = g.target.clone().css('position', 'absolute');
|
||
g.proxy.appendTo('body');
|
||
}
|
||
else
|
||
{
|
||
g.proxy = $("<div class='l-draggable'></div>");
|
||
g.proxy.width(g.target.width()).height(g.target.height())
|
||
g.proxy.attr("dragid", g.id).appendTo('body');
|
||
}
|
||
g.proxy.css({
|
||
left: p.proxyX == null ? g.current.left : g.current.startX + p.proxyX,
|
||
top: p.proxyY == null ? g.current.top : g.current.startY + p.proxyY
|
||
}).show();
|
||
},
|
||
_removeProxy: function ()
|
||
{
|
||
var g = this;
|
||
if (g.proxy)
|
||
{
|
||
g.proxy.remove();
|
||
g.proxy = null;
|
||
}
|
||
}
|
||
|
||
});
|
||
|
||
})(jQuery); |