function dragFun(id) {
  var Drag = document.getElementById(id);
  Drag.onmousedown = function(event) {
    var ev = event || window.event;
    event.stopPropagation();
    var disX = ev.clientX - Drag.offsetLeft;
    var disY = ev.clientY - Drag.offsetTop;
    document.onmousemove = function(event) {
    var ev = event || window.event;
    Drag.style.left = ev.clientX - disX + "px";
    Drag.style.top = ev.clientY - disY + "px";
    Drag.style.cursor = "move";
    };
  };
  Drag.onmouseup = function() {
    document.onmousemove = null;
    this.style.cursor = "default";
  };
};

dragFun("treeDiv");

div 拖动 js实现的更多相关文章

  1. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  2. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  3. 让一个div拖动和让一个panel拖动加拉大拉小

    一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  4. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. DIV+CSS+JS实现色彩渐变字体

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 拖动层 拖动div 封装js 貌似不兼容FF,郁闷

    原文发布时间为:2009-12-02 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  7. jquery实现很简单的DIV拖动

    今天用jquery实现了一个很简单的拖动...实现思路很简单  如下: 在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差:    ...

  8. jQuery实现DIV拖动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

    故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动,  单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...

  10. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

随机推荐

  1. 内存概述-java虚拟机的内存划分

    内存概述 内存是计算机中的重要原件,临时存储区域,作用是运行程序,我们编写写的程序是存放在硬盘中的,在硬盘中的程 序是不会运行的,必须放进内存中才能运行,运行完毕后会清空内存. Java虚拟机要运行程 ...

  2. 我们从 CircleCI 安全事件获得的3个经验教训

    CircleCI 作为业内最受欢迎的 CI/CD 平台提供商之一,有超过20万个 DevOps 团队使用其平台.该公司在今年1月在其官网报告了一起安全事件引起客户恐慌.在此事件中,有身份不明的恶意攻击 ...

  3. Android第五次作业

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  4. Pytest插件pytest-order指定用例顺序

    Pytest插件pytest-order指定用例顺序 安装  pip install pytest-order 注意不是pytest-ordering 说起来这里有个故事 关于pytest-order ...

  5. 工具-使用org.openjdk.jol查看对象在内存中的布局

    1 添加依赖 <dependency> <groupId>org.openjdk.jol</groupId> <artifactId>jol-core& ...

  6. Redis01 Redis详细介绍

    参考:https://blog.csdn.net/u011863024/article/details/107476187 学习视频 redis官网 redis中文网 JAVA源码 1 sql的发展 ...

  7. C# Replace:一个熟悉而又陌生的替换

    前言 Replace 的作用就是,通过指定内容的替换,返回一个新字符串. 返回值中,已将当前字符串中的指定 Unicode 字符或 String 的 所有匹配项,替换为指定的新的 Unicode 字符 ...

  8. 使用idea的maven项目使用mybatis时遇到的坑

    在使用idea的maven项目中使用mybatis时遇到的一个问题,这个问题困扰了我一段时间,所以我来这里记录一下! 出现的问题是: 我把相同的代码复制到eclipse中,在eclipse中却能正常运 ...

  9. JZOJ 3447.摘取作物

    \(\text{Problem}\) 在一个矩阵里选数,每行最多选两个,每列最多选两个,最大会价值 \(n,m \le 30\) \(\text{Analysis}\) 对个这个限制如何实现? 跑费用 ...

  10. JZOJ 4296. 有趣的有趣的家庭菜园

    [NOIP2015模拟11.2]有趣的有趣的家庭菜园 题面 思路一 暴力 \(30\) 分! 很容易打,但是要注意: 开 \(\texttt{long long}\) 是非严格高于(等于是被允许的) ...