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. 移动端安卓开发学习记录--Android Studio打断点调试操作步骤记录

    今天我发现一个很迷的事情,我是安卓初学者,发现打印对象的话,打印不出来,但是打印对象的属性值,却可以打印出来,迷啊!!!我好迷茫 咨询大佬后,得知,JAVA打印对象的话,打印出来的不是它自己的内容,而 ...

  2. 通俗易懂angular搭建

  3. 设置多个系统---vue-el-admin

    1. 修改\src\settings.js const ppp= { title: 'XXXX System', titleZH: 'XXXX系統', flag: 'ppp' } const syst ...

  4. 千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)

    我曾经多次向人推荐Vim,其热情程度有些类似现在卖保险的,有的时候,人们会因为一些弥足珍贵的美好暗暗渴望一个巨大的负面,比如因为想重温手动挡的快乐而渴望买下一辆二十万公里的老爷车,比如因为所谓完美的音 ...

  5. Java 进阶P-1.1+P-1.2

    用类制造对象 对象与类 对象是实体,需要被创建,可以为我们做事情 类是规范,根据类的定义来创建对象 对象=属性+服务 数据:属性或状态 操作:函数 从这些例子可以看出来 class是提供服务的,数据是 ...

  6. Java堆外缓存(一个很有意思的应用)

    我们在开发过程中会遇到这样的场景:就是一个服务的各项 JVM 的配置都比较合理的情况下,它的 GC 情况还是不容乐观.分析之后发现有 2 个对象特别巨大,占了总存活堆内存的 90%以上.其中第 1 大 ...

  7. 深入解读.NET MAUI音乐播放器项目(一):概述与架构

    系列文章将分步解读音乐播放器核心业务及代码: 深入解读.NET MAUI音乐播放器项目(一):概述与架构 深入解读.NET MAUI音乐播放器项目(二):播放内核 深入解读.NET MAUI音乐播放器 ...

  8. 服务器设置导致mongo数据库的链接数受限

    记录一次使用 mongoDB 遇到的BUG,就是服务链接mongodb报错 [05-Nov-2022 16:46:05] WARNING: [pool www] child 10231 said in ...

  9. 【DS】2.1

    线性表:c++各种基础操作里面,有&没&避免错的代码额~ #include <stdio.h> void test(int &x){//没有&就没有带回主函 ...

  10. Eureka 注册中心和服务提供者

    什么是Eureka组件 spring cloud Eureka ,提供服务注册和服务发现的功能. 一:spring cloud Eureka Eureka Server 服务端 Eureka Clie ...