1.在学习ExtJs时，对其拖放功能感到很陌生，然后找了个拖放功能实现。

转载地址

2.拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化；元素的移动就是style.position的top和left的改变。

当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。

根据以上的基本原理，我写出了下面的基本思路。感觉代码还是比较短的，

  1.  拖拽状态 = 0
  2.  鼠标在元素上按下的时候{
  3.       拖拽状态 = 1
  4.       记录下鼠标的x和y坐标
  5.       记录下元素的x和y坐标
  6.  }
  7.  鼠标在元素上移动的时候{
  8.        如果拖拽状态是0就什么也不做。
  9.        如果拖拽状态是1，那么
  10.        　　元素y = 现在鼠标y - 原来鼠标y + 原来元素y
  11.  　　　　元素x = 现在鼠标x - 原来鼠标x + 原来元素x
  12.  }
  13.  鼠标在任何时候放开的时候{
  14.  　　拖拽状态 = 0
  15.  }
  1.  <html>
  2.      <head>
  3.          <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  4.          <title>mockDD</title>
  5.  
  6.         <script type="text/javascript">
  7.          var dragging = false;
  8.          var test;
  9.          var mouseY;
  10.          var mouseX;
  11.          window.onload = function(){
  12.              test = document.getElementById("test");
  13.              test.onmousedown = down;
  14.              test.onmousemove = move;
  15.              test.onmouseup = up;
  16.              test.style.position = "relative";
  17.              test.style.top = "0px";
  18.              test.style.left = "0px";
  19.          }
  20.          function down(event)
  21.          {
  22.              event = event || window.event;
  23.              dragging = true;
  24.              mouseX = parseInt(event.clientX);
  25.              mouseY = parseInt(event.clientY);
  26.              objY = parseInt(test.style.top);
  27.              objX = parseInt(test.style.left);
  28.          }
  29.          function move(event){
  30.              event = event || window.event;
  31.              if(dragging == true){
  32.                  var x,y;
  33.                  y = event.clientY - mouseY + objY;
  34.                  x = event.clientX - mouseX + objX;
  35.                  test.style.top = y + "px";
  36.                  test.style.left = x + "px";
  37.              }
  38.          }
  39.          function up(){
  40.              dragging = false;
  41.          }
  42.          </script>
  43.  
  44.      </head>
  45.      <body>
  46.  
  47.       <div id="test" style="border:1px solid; width:400px; background:#CCCCCC;">
  48.        <p>我是拖拽示例DIV。</p>
  49.        <p>可以试验一下效果。</p>
  50.      </div>  
  51.  
  52.      </body>
  53.  </html>

JavaScript如何实现拖放功能的更多相关文章

  1. Draggabilly – 轻松实现拖放功能（Drag & Drop）

    Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 Req ...

  2. 【温故而知新-Javascript】使用拖放

    HTML5 添加了对拖放(drag and drop)的支持.我们之前只能依靠jQuery 这样的JavaScript库才能处理这种操作.把拖放内置到浏览器的好处是它可以正确的集成到操作系统中,而且正 ...

  3. 小强的HTML5移动开发之路（16）——神奇的拖放功能

    来自:http://blog.csdn.net/dawanganban/article/details/18181273 在智能手机发展飞速的现在拖放功能已经成为一种时尚,但是在我们的浏览器上是不是还 ...

  4. WPF拖放功能实现zz

    写在前面:本文为即兴而作,因此难免有疏漏和词不达意的地方.在这里,非常期望您提供评论,分享您的想法和建议. 这是一篇介绍如何在WPF中实现拖放功能的短文. 首先要读者清楚的一件事情是:拖放主要分为拖放 ...

  5. 使用javascript实现的一些功能

    原文:使用javascript实现的一些功能 今天学习了javascript中的事件,已经接近尾声,可以说明天跨入jquery的学习啦,学习了一周的javascript,感觉还没有掌握其中学习的微妙之 ...

  6. 如何使用LightningChart拖放功能进行数据转移 ?

    本文主要介绍如何使用LightningChart扩展拖放功能为所有图表组件创建图表,如:系列,标题,轴线等等.支持用鼠标放置自定义对象到另一个图表中,如:可以添加或修改JSON/CSV或其他格式的数据 ...

  7. 脚本div实现拖放功能

    脚本div实现拖放功能 网页上有很多拖曳的操作,比如拖动树状列表,可拖曳的图片等. 1.原生拖放实现 <!doctype html> <html lang="en" ...

  8. HOW TO： 在 Visual C# .NET 应用程序中提供文件拖放功能

    本文假定您熟悉下列主题: Windows 窗体列表框控件 Windows 窗体事件处理 生成示例的步骤 列表框控件提供了您需要处理的两个拖放事件: DragEnter 和 DragDrop. 当您在控 ...

  9. JavaScript如何实现计时功能。

    JavaScript如何实现计时功能. 解答:<script> window.setTimeout( “window.location = ‘http://www.csdn.net ‘; ...

随机推荐

  1. zabbix创建触发器

    1. 增加触发器 配置-->主机-->选择主机-->创建触发器 2. 配置触发器 3.查看触发器的状态 如果有问题会显示红色的问题

  2. 用c语言如何在数字前自动补0

    一: #include <stdio.h>int main(){ long a=3,b=4,c=15; printf("......."a,b,c);return 0; ...

  3. Android设计和开发系列第一篇：Notifications通知(Develop—Training)

    Develop篇 Building a Notification PREVIOUSNEXT THIS LESSON TEACHES YOU TO Create a Notification Build ...

  4. jQuery缓存机制（二）

    1.从用户调用的入口开始阅读,因为这是我们比较熟悉的部分(主要做参数的调整,根据不同的完成不同的功能) // 进入jQuery Data模块的入口 使用方法有三种,不传参,传一个参,传两个参.示例$( ...

  5. 流程图 --- BPMN规范简介

    BPMN 目前 是2.0规范 http://www.bpmn.org/   BPMN Quick Guide http://blog.csdn.net/flygoa/article/details/5 ...

  6. vsCode_1.27.2

    User Settings: 一,当前行高亮显示: "editor.renderLineHighlight": "line", 二,如何呈现空白字符(一般选no ...

  7. LeetCode 18 4Sum (4个数字之和等于target)

    题目链接 https://leetcode.com/problems/4sum/?tab=Description 找到数组中满足 a+b+c+d=0的所有组合,要求不重复. Basic idea is ...

  8. sencha touch 简单的倒计时插件

    效果如图: 代码: Ext.define('ux.label.Countdown', { alternateClassName: 'labelCountdown', extend: 'Ext.Comp ...

  9. mybatis generator如何定制JavaTypeResolver，使smallint类型的数据库字段在po中的类型为Integer？

    一.问题概述 忙了一段时间的jenkins持续集成,又要开始开发任务了.这两天在用mybatis generator来逆向生成dao层工程. 其中一个问题在于,组长在设计表的时候,不少枚举使用了sma ...

  10. 关于卸载vmware后如何删除VMware Network Adapter VMnet1虚拟网卡

    默认情况下.我们在windows下安装了vmware虚拟机后,都会产生VMware Network Adapter VMnet1虚拟网卡 对于vmware虚拟网卡的管理,我们可以在vmware虚拟机软 ...