dom 拖拽div

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{
    width:100px;
    height:100px;
    background:red;
    position:absolute;
    }
</style>
<script>
window.onload = function ()
{
    var odiv = document.getElementById(‘div1‘);

    odiv.onmousedown = function (ev)
    {
        var ev = ev || event;
        var dix = ev.clientX - this.offsetLeft;
        var diy = ev.clientY - this.offsetTop;
        document.onmousemove = function (ev)
        {
            var ev = ev || event;
            odiv.style.top = ev.clientY - diy + ‘px‘;
            odiv.style.left =ev.clientX - dix + ‘px‘;
        }

        document.onmouseup = function ()
        {
            document.onmousedown = document.onmousemove = null;
        }
    }
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>
时间: 2024-10-14 20:41:10

dom 拖拽div的相关文章

理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二.一步步的实现这个拖拽过程的几个要求 (一)拖拽起来 里面的边框是表示页面哦(我们的屏幕所能看到的东东). 获取移动距离的思路: 记录鼠标按下和鼠标抬起两次的坐标,然后相减,再加上div跟边缘之间的间距.就得到移动距离. 之前我也在这里困惑了,不明白为什么还要再加上offsetLeft.原因就是cl

简洁的drag效果,自由拖拽div的实现及注意点

偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mousedown事件,鼠标mousedown的时候记录此时的鼠标X轴和Y轴以及拖拽框的left和top,并且给拖拽标记赋值true,代表拖拽动作就绪.第二步是mousemove事件,此时动态获取鼠标的X轴和Y轴,然后计算出来拖拽框新的left和top并赋值使其实现拖拽效果.第三步是mouseup事件,鼠标弹

php+mysql+js拖拽div实例

php+mysql+js拖拽div实例 代码已改好,放在目录下可直接使用.适合新手学习! 效果如下图,比较适合做可以移动,拖拽的留言板. 实现思路: 思路也是很简单了,就是js获取定位后的数据,然后请求给PHP,php将定位的横向坐标和纵向坐标存到数据库! 代码实例下载地址:http://download.csdn.net/detail/u011986449/8099045

如何拖拽DIV边线并左右自适应改变大小?

//树图拉伸    jQuery(function ($){                  var doc = $(document), dl = $(".side-tree"), dc = $(".tree-content");                  var sum = dl.css("left") + dc.width() +                     $(".tree-handler").m

dom 拖拽回放

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ height:100px; width:100px; background:pink; position:absolute; } </style> <script> window.onload = fun

Jquery实现div拖拽

Jquery实现div拖拽 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script type="text/javascript"

js可以随意拖拽的div的实现

最近花了点时间用纯JS写了一个扫雷程序,写出来效果很差,自己长时间使用面向过程的方式编写代码,写的程序到后面都乱了,有必要找时间好好的深入理解一下OOP了.有时间会把写的东西拿上来.就当是留个纪念吧.打算用OOP重新写个扫雷程序,希望令自己满意. ——————————————碎碎念 记录一个实现随意拖拽div的实现方法,当作备忘吧,指不定什么时候用到了呢. <!DOCTYPE html> <html lang="en"> <head> <met

案例:简易的Div拖拽

鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedown.onmousemove.onmouseup) 解决问题: 1.拖拽过程中,鼠标容易滑出Div区块: 2.防止Div拖出页面:修正位置: 3.解除绑定事件:鼠标左键抬起后,Div不再随着鼠标移动而发生位置变化: <!DOCTYPE html> <html lang="zh-CN"> &l

JS—实现拖拽

JS中的拖拽示例:    1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变    2)实现拖拽遇到的问题:        问题1:当鼠标按下移动过快时,离开了拖拽的物体时,这时拖拽物体将不再随着鼠标移动                因为拖拽的div太小了,这时我们可以将在拖拽物体上的mousemove事件放到document上面                同时将mouseup也改为document上面的事件                IE下直接用obj.s