div里拖动图片,不超过边界

miv4t 2018-08-14 05:16:26

我要在小div里面拖动大图片,拖动的时候图片会拖出div之外,看不到㲏,我想实现图片只能在div里面拖动....

...全文

972 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

葉幺 2018-09-05

打赏
举报

回复

先判断下div上下左右的坐标，以及图片的宽高，当图片移动到div边时，让其停留在边的位置出不去，要判断4个边

yhanw 2018-09-04

打赏
举报

回复

可以使用定位，拖动时改变定位，同时使用if语句判断定位范围。

狂野的心跳 2018-08-27

打赏
举报

回复

https://blog.csdn.net/guozhangqiang/article/details/79207137 这是我写的 div在浏览器可见区域拖动原理一样的

___紫菜 2018-08-20

打赏
举报

回复

那就判断一下坐标呗

因公司需要，自己写了个js拖拽插件，div拖拽和拖拽边界限定，方便使用的小插件，内含注释，可以直接调用，代码简单易懂。

本文实例为大家分享了js实现拖拽与碰撞检测的具体代码，供大家参考，具体内容如下拖拽原理分析对于拖拽一个div盒子，首先我们需要将鼠标移动到盒子上，然后按住鼠标左键，移动鼠标到目标位置，再松开鼠标，对于这一过程的分析，显然需要三个鼠标事件：按住鼠标：onmousedown 移动鼠标：onmousemove 松开鼠标：onmouseup 实现步骤 1、**鼠标按下时：**我们获取鼠标当前所在的位置距离页面左边界与上边界的距离，分别减去盒子距离页面左边界与上边界的值，这样我们就得到了鼠标距离盒子左边界与上边界的值； 2、**鼠标移动时：**我们重新获取此时鼠标距离页面左边界

本课程是带领大家学习Pc端网页、app、小程序的布局以及样式添加，学完本课程，大家可以对任意网页实现布局，思路清新。课程简介：1，html5编辑器的介绍和使用2，块标签3，内联标签4，超链接和锚点5，12种选择器6，颜色7，单位8，css属性9，盒模式10，div布局11，内容图片12，布局图片13，用户交互图片14，字体15，表单16，表格17，浮动18，定位19，内联框架20，搜索引擎优化21，实战案例

上文已经提到过了jQuery EasyUI插件引用一般我们常用的有两种方式（排除easyload加载方式），所以本篇要总结的Draggable组件同样有两种方式加载：（1）、使用class加载方式： <div id=box class=easyui-draggable xss=removed> 内容部分 div> （2）、JS 加载调用 $(‘#box’).draggable(); 同样上文也说了，使用class属性不利于我们拓展组件的其他属性，所以我们使用JS调用的方式，后面的文章也是使用JS调

<style> *{ margin: 0px; padding: 0px; } .box{ width: 300px; height: 300px; background-color: gold; ...

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章