javascript实现dom元素可拖动

2024-12-19 10:20:59

摘要：

　　最近在项目中要做一个图片预览的功能，这时候会遇到用户上传很大的图片，已经超出视图界面。最终决定做一个在固定宽和高的位置，用户可以拖动图片查看。所以自己就写了一个支持ie5+，chrome，Firefox，opera等浏览器的可拖动dom元素的插件。

实现这个功能所需要的知识点不多，如下：

1、js中element.style.left

style.left返回的变量是个字符串，是个可改变量

js中element.offsetLeft

offsetLeft返回的是个int类型，不可改变量（意思就是说，改这个变量是不会影响布局的)

2、js 中event.clientX

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。

3、js中element.className

改变样式的类的方法

以上三点都是些比较熟的知识了，想说的是以下这点：

4、js中为对象添加事件监控

element.addEventListener("event","fun","boolen");

event:表示事件

fun:指的是事件触发后执行的函数

项目地址：https://github.com/baixuexiyang/drag

实例：

var drag = new Drag("test", {
      onStart: function(){

      },
      onMove: function(){
        document.getElementById('position').innerHTML = '距离左边：' + drag.getPositions().left + '；距离顶部：' + drag.getPositions().top;
      },
      onStop: function(){

      }
    });

我们再开看一个实例中遇到的问题，这个问题我弄了好久都找不出很好的解决方法

我们来看个例子：（方便测试，我把代码写在一个文件里面）

drag.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>鼠标拖拽</title>
  <style type="text/css">
    <!--
    #dragdiv{
      background-color:#0A0909;
      height:200px;
      width:157px; 

      position:absolute;
    }
    .ondrag{
      filter:alpha(opacity=200);
      cursor:move;
    }
    .enddrag{
      filter:alpha(opacity=100);
      cursor:default;
    }
    #father{
      width:600px;
      height:700px;
      background:#C63535;
    }
    -->
  </style>
</head>
<body>
  <div id="father">
  <div id="dragdiv"></div>
  </div>
  <script language="JavaScript">
    var dragdiv=document.getElementById("dragdiv");
    var father=document.getElementById("father");
    var offsetx=0;
    var offsety=0;
    var draging=false;
    function beforeDrag(ev){ 

        if (!draging) {
          draging = true;
          var l = dragdiv.offsetLeft;
          var t = dragdiv.offsetTop;
          offsetx = ev.clientX - l;
          offsety = ev.clientY - t; 

        }
        else {
          dragdiv.className = "enddrag";
          dragdiv.removeEventListener("mousemove",onDrag);
          draging = false;
          return;
        } 

    }
    function endDrag(){
      draging=false;
      dragdiv.className="enddrag";
    }
    function onDrag(ev){
      if (!draging) {
        dragdiv.className = "enddrag";
        return;
      }
      else {
        dragdiv.className = "ondrag"; 

        dragdiv.style.left = (ev.clientX - offsetx) + "px";
        dragdiv.style.top = (ev.clientY - offsety) + "px"; 

      }
    }
      dragdiv.addEventListener("mousedown",beforeDrag,true);
      dragdiv.addEventListener("mousemove",onDrag,false);
      dragdiv.addEventListener("mouseup",endDrag,true); 

  </script> 

</body> 

</html>

代码很简单，肯用一点点心看的话，都能看懂了

第一次拖拽很成功，按住鼠标进行拖。第二次就不正常了，要想第二次正常，必须鼠标点一下其他地方（就是非拖拽部分）

上面的鼠标事件

"mousedown”是指按下鼠标时触发此事件，（上面触发了beforeDrag函数)

"mousemove"指鼠标移动时触发此事件，（上面触发了onDrag函数）

"mouseup"指鼠标按下后松开鼠标时触发此事件。（上面触发了endDrag函数)

ps:网上查的鼠标时间是"onmousedown",笔者实验"onmousedown"没有事件响应,"mousedowm"才正常

上面所说的问题，尝试了很多实验，考虑到了addEventListener的顺序问题，第三个参数true/false的事件流问题，还是没有找到完美的解决方法

"mouseup"事件在第二次监控就失败了，重新获取焦点才正常（就是鼠标点一下其他地方）

整理JavaScript对DOM中各种类型的元素的常用操作

节点类型 nodeType 以下是一些重要的nodeType的取值: 1: 元素element 2: 属性attr 3: 文本text 8: 注释comments 9: 文档document nodeName,nodeValue 节点关系 childNodes: 每个节点都有一个childNodes属性,其中保存着一个NodeList对象 firstChild: 等同于childNodes[0] lastChild: 等同于childNodes.length-1 同时通过使用列表中每个节点的pr
快速解决js动态改变dom元素属性后页面及时渲染的问题

今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div> 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文件的进度,简单实现一共100个文件的话
jQuery遍历DOM元素与节点方法详解

本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,
jQuery添加删除DOM元素方法详解

本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. 例如:document,getElementsByTagName("form");//使用DOM
JS动态创建DOM元素的方法

本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }
使用jQuery监听DOM元素大小变化

起因今天写页面的时候突然有这么个需求,由于父元素(一个DIV)的height是由javascript计算出来的固定的值,而在其中增加了一个多说插件,在用户评论后,子元素(DIV)的height属性增加,导致子元素溢出.但是又不知道如何为多说的评论按钮增加回调函数,于是乎就想到了根据子元素的大小变化来重新计算父元素的height. onresize? 平常,都是在整个浏览器窗口变化时触发一个修改布局的回调函数.使用的是window对象的resize事件,利用: window.onresize =
javascript实现dom元素可拖动

摘要: 最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面.最终决定做一个在固定宽和高的位置,用户可以拖动图片查看.所以自己就写了一个支持ie5+,chrome,Firefox,opera等浏览器的可拖动dom元素的插件. 实现这个功能所需要的知识点不多,如下: 1.js中element.style.left style.left返回的变量是个字符串,是个可改变量 js中element.offsetLeft offsetLeft返回的是个int类型,不可改变量(
JavaScript遍历DOM元素的常见方式示例

本文实例讲述了JavaScript遍历DOM元素的常见方式.分享给大家供大家参考,具体如下: 对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild时会导致行为不一致. DOM中为元素新增了下面几个属性: childElementCount:返回子元素(不包括文本节点和注释)的数量: firstElementChild:firstChild的元素版: lastElementChild:lastChild的元素
JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析

本文实例讲述了JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作.分享给大家供大家参考,具体如下: createElement,createTextNode,appendChild,insertBefore,removeChild,replaceChild createElement 以下代码是用于创建 <p> 元素: var para = document.createElement("p"); createTextNode 为 <p>
JavaScript操作DOM元素的childNodes和children区别

对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象. 具体看一下针对children和childNodes在chrome环境下的测试: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</
用JavaScript获取DOM元素位置和尺寸大小的方法

在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientL
Javascript处理DOM元素事件实现代码

DOM元素都有一些标准事件,一般使用时只要使用onclick=function的方式就可以了,但是当需要为DOM元素添加多个事件,删除事件,或在用Javascript封装控件的时候,为封装的控件添加自定义事件的时候,onclick=function的方式就不够用了,但是浏览器有addEventListener和attachEvent方法可供调用,从而模拟出类似于C#中的事件委托的事件触发机制! 复制代码代码如下: /* * 功能:事件处理 * Author:LQB * 时间:2009-1-4
JavaScript HTML DOM元素节点操作汇总

前言在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档 9. 一.添加和删除节点(HTML 元素) 1.创建节点 1)创建该元素(元素节点): 2)向一个已存在的元素追加该元素. 语法:appendChild(newnode) eg: <div id="div1"&g
JavaScript获取DOM元素的11种方法总结

在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i
JavaScript DOM元素常见操作详解【添加、删除、修改等】

本文实例讲述了JavaScript DOM元素常见操作.分享给大家供大家参考,具体如下: DOM概念 DOM(Document Object Model):文档对象模型. 通过开发者工具的Elements标签页可以查看通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点整个文档是由一系列节点对象组成的一棵树. 节点(Node)包括元素节点(1).属性节点(2).文本节点(3)(1..2..3..代表节点类型)_ var th1= document.getElementByI
JavaScript操作HTML元素和样式的方法详解

JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> <

javascript实现dom元素可拖动

相关推荐

随机推荐