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. 标准&有效的项目开发流程

    代码版本管理 在项目中,代码的版本管理非常重要.每个需求版本的代码开发在版本控制里都应该经过以下几个步骤. 在master分支中拉取该需求版本的两个分支,一个feature分支,一个release分支 ...

  2. Redis - 介绍与使用场景

    简介 Redis 的全称是 Remote Dictionary Server,是一个使用 C 语言编写的.开源的(BSD 许可)高性能非关系型(NoSQL)的键值对数据库. Redis 的数据是存储在 ...

  3. MyBatis的使用三(在sql语句中传值)

    本文主要介绍在mybatis中如何在sql语句中传递参数 一. #{ } 和 ${ } 1. #{ } 和 ${ }的区别 #{ }是预编译处理 ==> PreparedStatement ${ ...

  4. 定时调度插件------FluentScheduler

    定时调度插件------FluentScheduler 源码地址 官网文档地址 使用说明 dll引用 文章使用的版本为5.5.1版本 使用GuGet搜索FluentScheduler即可找到 如果框架 ...

  5. Linux服务器硬件及RAID配置

    Linux服务器硬件及RAID配置 一.RAID磁盘阵列介绍 独立冗余磁盘阵列(Redundant Array of Independent Disks) 作用: 把多块独立的物理硬盘按不同的方式组合 ...

  6. 力扣---2319. 判断矩阵是否是一个 X 矩阵

    如果一个正方形矩阵满足下述 全部 条件,则称之为一个 X 矩阵 :    矩阵对角线上的所有元素都 不是 0    矩阵中所有其他元素都是 0给你一个大小为 n x n 的二维整数数组 grid ,表 ...

  7. CentOS7 RPM方式安装JDK

    1.下载jdk rpm Java Downloads | Oracle 中国 https://www.oracle.com/cn/java/technologies/downloads/#jdk19- ...

  8. sqlserver数据库批量新增修改类

    MSSql Server 数据库批量操作 需要引用的命名空间 using System; using System.Collections.Generic; using System.Data; us ...

  9. 毕设进度更新(真的不知道自己做到哪- - 备忘录性质)+3.19是mavan配置的常见问题

    3.19 maven的配置 我也不知道我的cmd 输入mvn complie就是报错 也没办法下载 奇了怪了 检查了setting文件也没得- - 然后也没办法像老师一样直接导入tomcat的包 但是 ...

  10. 郁金香5 分析游戏内npc 数据

    004D4BAE | CC | int3 | 004D4BAF | CC | int3 | 004D4BB0 | 55 | push ebp | 004D4BB1 | 8BEC | mov ebp,e ...