拖拽:最核心是三个事件,鼠标按下,鼠标移动,鼠标弹起。按下时激活拖拽,然后时刻根据鼠标的位置来更新物体的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. caffe上使用hdf5格式文件以及回归(regression)问题

    最近用caffe做了一下regression问题,先用data layer中的data,float_data试了一下,data用来存放图片,float_data存放regression的values, ...

  2. ios 关于文件操作 获取 文件大小

     分类: Apple IPhone2012-06-28 11:31 4664人阅读 评论(0) 收藏 举报 ios语言manager测试c c语言 实现 #include "sys/stat ...

  3. 一个自动备份mysql数据库的bat文件内容

    自动备份mysql数据库,并已当前的日期时间为目录 copy过去, xcopy将近15年没有用dos命令,还是这么亲切 另 本方法是备份数据库文件,不是dump导出,然后再计划任务中使用,我用的是wa ...

  4. tcp/ip协议listen函数中backlog参数的含义与php-fpm的502 Bad Gateway

    To understand the backlog argument, we must realize that for a given listening socket, the kernel ma ...

  5. (oracle/mysql)启停,导入导出,DB字符集

    ==================================================================================== DB启动停止 ======== ...

  6. mysql 启动错误-server PID file could not be found

    [root@centos var]# service mysqld stop MySQL manager or server PID file could not be found!       [F ...

  7. Objective-C Polymorphism

    #import <Foundation/Foundation.h> @interface Shape : NSObject { CGFloat area; } -(void)printAr ...

  8. ubuntu remove mysql

    ubuntu 彻底删除 mysql 然后重装 mysql 删除 mysql sudo apt-get autoremove --purge mysql-server-5.0sudo apt-get r ...

  9. MyBatis知多少(5)业务对象模型

    几乎所有结构良好的软件都使用了分层设计.分层设计将一个应用程序根据技术职能分为几 个内聚的部分,从而将某种特定技术或接口的实现细节与其他部分分离开来.分层设计可以用任 何一种强壮的编程语言来实现.图1 ...

  10. AssetBundle系列——场景资源之打包(一)

    本篇讲解的是3D游戏的场景资源打包方式,首先简单的分析一下场景中所包含的资源的类型. 场景资源一般包含:地表模型(或者是Unity Terrain),非实例化物体(摄像机.空气墙.光源.各种逻辑物体之 ...