拖拽：最核心是三个事件，鼠标按下，鼠标移动，鼠标弹起。按下时激活拖拽，然后时刻根据鼠标的位置来更新物体的left和top值，达到跟随鼠标的效果，鼠标弹起则取消拖拽。

以下是代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="gbk" />

<title>拖拽</title>

<style>

*{

    margin:0px;

}

div{

    height:200px;

    width:200px;

    background:red;

    position: absolute;

    cursor:pointer;

}

</style>

<script type="text/javascript">

window.onload=function(){

   var odiv=document.getElementById('d');

    odiv.onmousedown=function(event){

        var e=event||window.event;

        var difx=event.clientX-odiv.offsetLeft;//刚移动时物体要在原有的位置点开始移动，而不是事件发生的位置处开始移动,difx和dify为点击处

        var dify=event.clientY-odiv.offsetTop; //离物体左上角（实际位置）的距离

        document.onmousemove=function(event){

            var event=event||window.event;

            var left=event.clientX-difx;

            var top=event.clientY-dify;

            var maxleft=document.documentElement.clientWidth-odiv.offsetWidth;  //计算最大移动距离

            var maxtop=document.documentElement.clientHeight-odiv.offsetHeight;

            left=left<0?0:left;                //防止越界

            left=left>maxleft?maxleft:left;

            top=top<0?0:top;

            top=top>maxtop?maxtop:top;

                odiv.style.left=left+'px';    //时刻更新位置达到跟随鼠标

                odiv.style.top=top+'px';

        }

        document.onmouseup=function(){ //鼠标弹起，取消事件

            document.onmouseup=null;

            document.onmousemove=null;

        }

    }

}

</script>

</head>

<body>

    <div id='d'></div>

</body>

</html>

原理很简单，但实现过程要考虑很多细节，如刚移动时物体要在原有的位置点开始移动，而不是事件发生的位置处开始移动，还有计算物体有没有越界，越界则停止移动等细节问题。

js实现拖拽的更多相关文章

  1. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  2. js之拖拽事件

    js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...

  3. JS—实现拖拽

    JS中的拖拽示例:    1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变    2)实现拖拽遇到的问题:        问题1:当鼠标按下移动过快时,离开了拖拽的物体时 ...

  4. js鼠标拖拽

    html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...

  5. 原生Js实现拖拽（适用于pc和移动端）

    效果: HTML和CSS部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. js 利用jquery.gridly.js实现拖拽并且排序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js 实现拖拽排序

    <!DOCTYPE> <html lang="zh-cn"> <head> <meta http-equiv="Content- ...

  8. jquery.dragsort.js 实现拖拽过程遇到的问题

    .在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative ...

  9. JS实现拖拽功能

    本文代码地址(第一节):https://github.com/dirstart/js-exam/blob/master/%E6%8B%96%E6%8B%BDdiv1.html 第二节:https:// ...

  10. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

随机推荐

  1. 图文安装Windows Template Library - WTL Version 9.0

    从http://wtl.sourceforge.net/下载 WTL 9.0,或者点此链接下载:WTL90_4140_Final.zip,然后解压到你的VC目录下面, 我的地址是:C:\Program ...

  2. datagrid 动态列

    var options={}; $(function(){ var myNj = 9; //初始化 $("#disgrid").datagrid({ type: 'POST', n ...

  3. [CS231n-CNN] Image classification and the data-driven approach, k-nearest neighbor, Linear classification I

    课程主页:http://cs231n.stanford.edu/ Task: Challenges: _________________________________________________ ...

  4. MyBatis知多少（14）分散的数据库系统

    任何一个重要的数据库无疑都会拥有不止一个依赖者.即使该数据库只是简单地被两个Web 应用程序所共享,也有许多事情需要考虑.假设有一个名为网上购物车的Web应用程序,它使用了一个包含类别代码的数据库.就 ...

  5. Knockout 新版应用开发教程之Observable与computed

    KO是什么? KO不是万能的,它的出现主要是为了方便的解决下面的问题: UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态.样式等属性? UI元素之间关系比较紧密,比如操作一个元 ...

  6. iOS-文字自适应

    1.自动改变Label的宽和高 - (void)createLabel1 { UILabel * label = [[UILabel alloc] initWithFrame:CGRectZero]; ...

  7. gopush-cluster 架构

    前言 gopush-cluster是一套golang开发的实时消息推送集群,主要分享一下开发这套系统的想法和思路. 架构 主要分为三个模块来开发,comet/web/message. comet 主要 ...

  8. JAVA jdbc(数据库连接池)学习笔记（一）

    学习内容: 1.JDBC的含义... JDBC想必学过JAVA的就不会陌生,JDBC到底是什么呢?其实就是由JAVA的一些类和接口构成的API,保存在java.sql和javax.sql..包中的一些 ...

  9. 汇编学习：float与double速度问题

    X86处理器包含两种类型的浮点数寄存器.第一种使用8个浮点寄存器组成浮点寄存器栈,另一种为向量寄存器(XMM,YMM),它们对于单双精度的处理是不同的.本文将讨论两种模式下的浮点数计算速度问题. 一. ...

  10. Sql Server来龙去脉系列 必须知道的权限控制基础篇

    题外话:最近看到各种吐槽.NET怎么落寞..NET怎么不行了..NET工资低的帖子.我也吐槽一句:一个程序猿的自身价值不是由他选择了哪一门技术来决定,而是由他自身能创造出什么价值来决定. 在进入本篇内 ...