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. BUG日记之-----Unable to infer base url. This is common when using dynamic servlet registration or when the API is behind an API Gateway.

    在使用swagger进行测试的时候调用弹窗  解决办法: 在启动类添加@EnableSwagger2注解

  2. ChatGPT保姆级注册教程

    ChatGPT保姆级注册教程 最近几天OpenAI发布的ChatGPT聊天机器人火出天际了,连着上了各个平台的热搜榜.这个聊天机器人最大的特点是模仿人类说话风格同时回答大量问题. 有人说ChatGPT ...

  3. STM32F0库函数初始化系列:进入STOP模式,外部中断唤醒

    SYSCFG_EXTILineConfig(EXTI_PortSourceGPIOA, EXTI_PinSource0); EXTI_InitStructure.EXTI_Line=EXTI_Line ...

  4. 【WinForm】窗体之间传值的几种方式

    方法1:设置公共静态变量传值 eg: 1 public partial class mianForm 2 { 3 //声明i 为公共静态变量 4 public static string i = &q ...

  5. 2021级《JAVA语言程序设计》上机考试试题

    勉强写完了 Card package Bean; public class Card { private String CardId; private String CardData; private ...

  6. 2021级《JAVA语言程序设计》上机考试试题10

    教学副院长功能页 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  7. uniapp 分享 绘制海报

    小程序分享海报,由于微信的限制,暂时无法直接分享小程序到朋友圈(虽然微信开发者工具基础库从2.11.3开始支持分享小程序到朋友圈,但目前仍处于Beta中)所以生成海报仍然还是主流方式 主体思路:将设计 ...

  8. JWT的原理及使用

    目录 JWT的原理及使用 一.什么是JWT? 二.签发认证流程 三.使用方法 1.设置登录接口 2.设置过期事件 3.定制返回格式 4.配置认证类和权限类 5.写登录逻辑 5.配路由 JWT的原理及使 ...

  9. 推荐一个分布式单点登录框架XXL-SSO!

    有关单点登录(SSO)之前有写过两篇文章 一文读懂 JWT! 看完这篇不能再说不懂SSO原理了! 如果说XXL-JOB你可能并不陌生,它是非常火爆的一个分布式任务调度平台.但其实在该作者还有一个非常优 ...

  10. 配置项目请求地址和axios以及实现token过期无痛刷新

    配置请求地址:config->index.js 一个项目里通常有一个config->index.js,该文件包含了当前项目的请求地址,以及项目的版本信息. // 请求地址 const AP ...