本文介绍如何利用EasyUI库实现一个在特定范围内可拖动的元素。通过在HTML中添加class='easyui-draggable floating'并设置data-options，结合JavaScript的onDrag和onStopDrag事件监听，可以获取到元素移动后的横纵坐标，从而控制元素在限定区域内的移动。
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) {
<
最低0.47元/天 解锁文章
扫一扫
4132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
