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. flutter2.x报错解决type (RouteSettings) => Route<dynamic> is not a subtype of type (RouteSettings) => Route<dynemic> of function result

    flutter2.x报错解决type (RouteSettings) => Route <dynamic>? is not a subtype of type (RouteSetti ...

  2. c++ 跑酷小游戏之用户体验plus

    #undef UNICODE#undef _UNICODE#include <iostream>#include <iomanip>#include <string> ...

  3. 文盘Rust -- rust 连接云上数仓 starwift

    作者:京东云 贾世闻 最近想看看 rust 如何集成 clickhouse,又犯了好吃懒做的心理(不想自己建环境),刚好京东云发布了兼容ck 的云原生数仓 Starwfit,于是搞了个实例折腾一番. ...

  4. Selenium Webdriver驱动自管理

    Webdriver驱动自管理 背景 在selenium自动化中,驱动和浏览器有一定的对应关系,以最常见的chrome和firefox为例. chrome 要求比较严格. 比如在地址栏输入chrome: ...

  5. LeetCode_单周赛_328

    6291. 数组元素和与数字和的绝对差 代码 模拟即可 class Solution { public int differenceOfSum(int[] nums) { int ans = 0; i ...

  6. Seleniumweb自动化测试01

    1.selenium简介 selenium是python的一个web第三方包,主要使用来做web自动化测试的 环境要求: ①.要有谷歌浏览器 ②.下载谷歌浏览器的驱动chromedriver(驱动我们 ...

  7. IoT 边缘集群基于 Kubernetes Events 的告警通知实现(二):进一步配置

    上一篇文章 IoT 边缘集群基于 Kubernetes Events 的告警通知实现 目标 告警恢复通知 - 经过评估无法实现 原因: 告警和恢复是单独完全不相关的事件, 告警是 Warning 级别 ...

  8. Spring IOC官方文档学习笔记(十一)之使用JSR 330标准注解

    1.使用@Inject和@Named进行依赖注入 (1) Spring提供了对JSR 330标准注解的支持,因此我们也可以使用JSR 330标准注解来进行依赖注入,不过,在此之前,我们得先使用mave ...

  9. Linux基础之用户、组和权限管理

    用户类别分为:普通用户.系统用户.登陆用户 用户标识:UserID, UID 是16bits二进制数字: 0-65535管理员:0普通用户:0-65536系统用户:1-499(CentOS6)1-99 ...

  10. 安卓逆向 利用JEB进行动态调试断点 进行内购

    1.第一步肯定是需要配置好,连接到模拟器 2.这个程序会弹出支付失败 所以我们搜索一下关键字 看到这里就很兴奋了 我们取JEB里面对这个方法进行断点 if eqz 等于0 这里 看到那个寄存器是v5 ...