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

转载地址

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

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

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

 拖拽状态 = 0

 鼠标在元素上按下的时候{

      拖拽状态 = 1

      记录下鼠标的x和y坐标

      记录下元素的x和y坐标

 }

 鼠标在元素上移动的时候{

       如果拖拽状态是0就什么也不做。

       如果拖拽状态是1，那么

       　　元素y = 现在鼠标y - 原来鼠标y + 原来元素y

 　　　　元素x = 现在鼠标x - 原来鼠标x + 原来元素x

 }

 鼠标在任何时候放开的时候{

 　　拖拽状态 = 0

 }
 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=gbk">

         <title>mockDD</title>

        <script type="text/javascript">

         var dragging = false;

         var test;

         var mouseY;

         var mouseX;

         window.onload = function(){

             test = document.getElementById("test");

             test.onmousedown = down;

             test.onmousemove = move;

             test.onmouseup = up;

             test.style.position = "relative";

             test.style.top = "0px";

             test.style.left = "0px";

         }

         function down(event)

         {

             event = event || window.event;

             dragging = true;

             mouseX = parseInt(event.clientX);

             mouseY = parseInt(event.clientY);

             objY = parseInt(test.style.top);

             objX = parseInt(test.style.left);

         }

         function move(event){

             event = event || window.event;

             if(dragging == true){

                 var x,y;

                 y = event.clientY - mouseY + objY;

                 x = event.clientX - mouseX + objX;

                 test.style.top = y + "px";

                 test.style.left = x + "px";

             }

         }

         function up(){

             dragging = false;

         }

         </script>

     </head>

     <body>

      <div id="test" style="border:1px solid; width:400px; background:#CCCCCC;">

       <p>我是拖拽示例DIV。</p>

       <p>可以试验一下效果。</p>

     </div>  

     </body>

 </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. Flask中向前端传递或者接收Json文件的方法

    1. 利用flask的request.form.get()方法 这一中方法主要利用flask的request.form.get方法,获得前端发送给后台的json文件 Python 端代码: @app. ...

  2. React Native(四)——顶部以及底部导航栏实现方式

    效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...

  3. Stay hungry, Stay foolish 的原义

    乔布斯在斯坦福大学毕业演讲中说过,他最喜欢的一句话叫做"Stay hungry, Stay foolish". "Stewart和他的人出了好几期<地球产品目录&g ...

  4. 深入理解Auto Layout 第一弹

    本文转载至 http://zhangbuhuai.com/2015/07/16/beginning-auto-layout-part-1/ By 张不坏 2015-07-16 更新日期:2015-07 ...

  5. Lua 迭代器与closure

    所谓“迭代器”就是一种可以遍历(iterate over)一种极和中所有元素的机制.在Lua中,通常将迭代其表示为函数.每调用一次函数,即返回集合中的“下一个”元素.每个迭代器都需要在每次成功调用之间 ...

  6. X64下的虚拟地址到物理地址的转换

    https://bbs.pediy.com/thread-203391.htm   早就知道传上来排版会全乱掉,把pdf直接传上来吧 x64结构体系寻址.pdf 发现安大的关于x86启用PAE下的虚拟 ...

  7. 【接口安全】接口合法性验证加密验签SIGN 签名规则

    在对接API接口时,接口地址和参数结构都很容易被黑客抓包,从而模拟发送请求. 考虑到安全性,防止别人冒名调用,要对接口请求进行合法性验证. 基本原理如下 双方约定 APPID:参与签名和网络传输 AP ...

  8. Geeks面试题：Min Cost Path

    Min Cost Path   Given a cost matrix cost[][] and a position (m, n) in cost[][], write a function tha ...

  9. 【WEB前端系列之CSS】CSS3动画之Tranition

    前言 css中的transition允许css的属性值在一定的时间区间内平滑的过渡.这种效果可以在鼠标点击.获得焦点.被点击或对元素任何改变中触发,并圆滑的以动画效果改变CSS的属性值.语法: tra ...

  10. Win7 系统如何关闭休眠功能？（已解决）

    一不小心,使用了系统的 休眠 功能. 一开始也没注意. 后来,发现C盘(系统盘)怎么变小了? 一想,应该是休眠的问题. 我就想把它生成的文件给删了. 为此,我特意把 文件夹选项 里的 显示隐藏文件和文 ...