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. 超级容易理解的Three.js中的物体rotation

    假设模特头朝着自己现在躺在地上 那么改变Y就是等于躺着转圈圈 mesh.rotation.set( 0,Math.PI/1.2,0); 改变X就意味着,这个是本来模特头朝着自己躺着,然后站起来了,后脑 ...

  2. MRS_Debug仿真相关问题汇总

    解决问题如下: Debug时,看不到外设寄存器选项 Debug时,更改变量显示类型 Debug时,断点异常 跳过所有断点 取消仿真前自动下载程序 Debug时仅擦除程序代码部分flash空间 保存De ...

  3. Grafana 系列文章(八):Grafana Explore 中的 Inspector

    ️URL: https://grafana.com/docs/grafana/latest/explore/explore-inspector/ Description: Explore 中的检查器 ...

  4. socket模块实现网络编程及struct模块解决黏包问题

    目录 一.socket模块 1.简介 2.基于文件类型的套接字家族 3.基于网络类型的套接字家族 二.socket代码简介 三.socket代码优化 1.聊天内容自定义 2.让聊天循环起来 3.用户输 ...

  5. SQLSERVER 的 truncate 和 delete 有区别吗?

    一:背景 1. 讲故事 在面试中我相信有很多朋友会被问到 truncate 和 delete 有什么区别 ,这是一个很有意思的话题,本篇我就试着来回答一下,如果下次大家遇到这类问题,我的答案应该可以帮 ...

  6. Arm-Linux子系统的互相Notify

    前言: Linux下面不同的子系统一个个的组成了整个系统的运行环节,为了让这些子系统能够互相通讯,有一种叫做:notify chain(通知链)的东西.本篇看下. 概括 所谓通知链,有通知,就有执行的 ...

  7. 构建api gateway之 如何给openresty打patch

    如何给openresty打patch 由于很多功能实现的限制,我们不得不修改openresty,但我们又不一定能持续维护一个 openresty 分支,所有有了patch 这一操作. patch是怎么 ...

  8. Solon2 开发之容器,八、动态代理的本质

    在 Java 里动态代理,主要分:接口动态代理 和 类动态代理.因为它的代理类都是动态创建的,所以名字里会带上"动态". 官网的有些地方叫"代理",也有些地方叫 ...

  9. maven项目构建报错:Could not find artifact com.xxx.cloud:xxx-cloud:pom:1.0-SNAPSHOT and 'parent.relativePath' points at wrong local POM

    maven多模块项目打包的时候报错如下: [ERROR] [ERROR] Some problems were encountered while processing the POMs: [FATA ...

  10. CodeArts Snap:辅助你编程的神器

    摘要:通过将自然语言转化为规范可阅读.无开源漏洞的安全编程语言,提升开发者编程效率,助力企业快速响应市场需求. 本文分享自华为云社区<华为云发布智能编程助手 CodeArts Snap!> ...