前端實現在一定範圍內的拖動(easyui)
阿新 • • 發佈：2018-12-23
html:
<div class="easyui-draggable floating"
data-options="onDrag:onDrag,onStopDrag:onStopDrag"></div>
js:
function onDrag(e) {
var d = e.data;if (d.left < 0) {
d.left = 0
}
if (d.top < 0) {
d.top = 0
}
if (d.left + $(d.target).outerWidth() > $(d.parent).width()) {
d.left = $(d.parent).width() - $(d.target).outerWidth();
}
if (d.top + $(d.target).outerHeight() > $(d.parent).height()) {
d.top = $(d.parent).height() - $(d.target).outerHeight();
}
//console.log("L:"+d.left+"| T:"+d.top);
}
function onStopDrag(e) {
var d = e.data;
if (d.left < 0) {
d.left = 0
}
if (d.top < 0) {
d.top = 0
}
if (d.left + $(d.target).outerWidth() > $(d.parent).width()) {
d.left = $(d.parent).width() - $(d.target).outerWidth();
}
if (d.top + $(d.target).outerHeight() > $(d.parent).height()) {
d.top = $(d.parent).height() - $(d.target).outerHeight();
}
var a = d.target;//被移動的物件
d.left//移動後的橫座標
d.top//移動後的縱座標