关于Draggable的代码:
<div class="easyui-panel" style="position:relative;overflow:hidden;width:500px;height:300px;border:1px solid red;margin-top:20px;"> <div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;"> </div> </div> <script> 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(); } } </script>
渲染