java 中div被拖拽后经历某些事件能让div回到拖拽之前的位置 5C

java 中div被拖拽后经历某些事件能让div回到拖拽之前的位置

5个回答

用jquery插件可以

用一个全局变量记住div的原始位置即可。

     <script language="javascript">  

function small_down(e) {

var obig = document.getElementById("big");

var osmall = document.getElementById("small");

var e = e || window.event;

/*用于保存小的div拖拽前的坐标*/

osmall.startX = e.clientX - osmall.offsetLeft;

osmall.startY = e.clientY - osmall.offsetTop;

/*鼠标的移动事件*/

document.onmousemove = function(e) {

var e = e || window.event;

osmall.style.left = e.clientX - osmall.startX + "px";

osmall.style.top = e.clientY - osmall.startY + "px";

/*对于大的DIV四个边界的判断*/

if (e.clientX - osmall.startX <= 0) {

osmall.style.left = 0 + "px";

}

if (e.clientY - osmall.startY <= 0) {

osmall.style.top = 0 + "px";

}

if (e.clientX - osmall.startX >= 250) {

osmall.style.left = 250 + "px";

}

if (e.clientY - osmall.startY >= 250) {

osmall.style.top = 250 + "px";

}

};

/*鼠标的抬起事件,终止拖动*/

document.onmouseup = function() {

document.onmousemove = null;

document.onmouseup = null;

};

}

lt;/script>

先是记录div的原始相对于屏幕的位置,使用boundClientRect获取相对屏幕的位置,然后拖拽的过程中进行退拽的坐标对比,如果距离太小的话进行一个css动画回到原点就好了。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

4
createElement("div") 创建一个div 和 直接用字符串拼接一个div一样吗?
3
bootstrap模态框中div切换问题
9
如何在点击一个<div>时去执行一个javascript里的函数?
5
同级元素,p遮挡div,两个都绑定了click事件,如何使click只触发div不触发p
4
谁能帮我写一个点击按钮后提示正在加载,然后js get json返回的数据。插入指定DIV中
12
js 若 拖动 div中的图片到 div 框架之外的区域 则该图片就隐藏
12
jsp里面用文本框弹出div
3
javascript编程语言怎么实现拖动div并且保存div的布局
10
用JQuery实现在div1后追加多个有内容的div2,并实现div2里面的元素的id自增
1
html 两个平行的DIV中间为什么会有右边DIV后面的内容
1
javascript实现div从html中导入操作,从html中导入div文档怎么实现?
1
多个div浮窗的只有一个能移动的问题
1
学生请教html。想将10张图片进行幻灯片播放,每张对应一个div,div水平居中隐藏布置在图片背后
1
左边DIV①的扩充内容DIV②(DIV②属于DIV①中的内容)如何显示在右边iframe的上方?
9
点击按钮动态添加DIV时,添加了两个相同的DIV,现在要对其中指定的一个进行操作,应该如何区分?
2
js 实现div全屏,但在某些浏览中不能正常显示
2
如何用js点击相同类名的多个div,各个div之间的操作互不影响?
1
在div外面嵌套一个div,里面的js失效了不能用了
2
为什么div块被java代码包含之后,div块不被执行?
1
如何解决苹果 iso safari下div元素滑动时,不让同级div元素跟着滑动,并且还有橡皮筋效果的问题