可以拖动的div 实现代码第1/2页
发布时间:2024-03-19 17:46:20
要实现div的任意拖动,我们不妨分析一下整个过程。
当鼠标点击div时,触发一个事件,让div的位置属性(left,top)随着鼠标位置变化而变化,当鼠标释放后,div的位置属性就用了鼠标释放时的位置。
鼠标点击时触发事件是很容易做到的,只要在div的标签里加上onmouseclick就可以了,现在我们要解决的问题是如何让div的位置随着鼠标的位置变化而变化。
虽然这可能是一个很简单的推理过程,不过还是罗嗦点说清楚吧。div的left和top是div左上角的坐标,当我们把鼠标移到div中点击的时候,无疑鼠标的坐标和div的坐标是不一致的,这时候如果我们简单的让div的坐标等于鼠标的坐标,那么看起来的效果就不是那么完美了,所以我们先要得到鼠标的坐标和div坐标的差,然后在鼠标移动到的时候,在鼠标坐标上减去这个差来得到div的坐标(如果不太明白,那就先补习一下网页的基础知识)。
接下来的事情就简单了,当鼠标移动的时候,我们不断的计算得到div的坐标,并改变,在鼠标释放的时候,这个事件就被移除。
整个js函数如下:
function beginDrag(elementToDrag,event)
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener)
{
document.addEventListener(”mousemove”,moveHandler,true);
document.addEventListener(”mouseup”,upHandler,true);
//document.addEventListener(”mouseout”,upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent(”onmousemove”,moveHandler);
document.attachEvent(”onmouseup”,upHandler);
//document.attachEvent(”onmouseout”,upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e)
{
if (!e) e=window.event; //如果是IE的事件对象,那么就用window.event
//全局属性,否则就用DOM二级标准的Event对象。
elementToDrag.style.left=(e.clientX-deltaX)+”px”;
elementToDrag.style.top=(e.clientY-deltaY)+”px”;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener(”mouseup”,upHandler,true);
document.removeEventListener(”mousemove”,moveHandler,true);}
else
{
document.detachEvent(”onmouseup”,upHandler);
document.detachEvent(”onmousemove”,moveHandler);}
}
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
猜你喜欢
- 编写函数装饰器本节主要介绍编写函数装饰器的相关内容。跟踪调用如下代码定义并应用一个函数装饰器,来统计对装饰的函数的调用次数,并且针对每一次调
- 引言:本文是学习Turtle库时,发现两种方法都能改变画笔的方向,但二者又不是完全相同,故对其加以辨析总结到此,在本文你将收获:1.两种改变
- 本文实例讲述了python自定义类并使用的方法。分享给大家供大家参考。具体如下:class Person: def __init
- 使用下面的命令检查是否安装有MySQL Server[root@localhost etc]# rpm -qa | grep mysql /
- 打算学习linux和考一下认证。学习HCIA-AI实验手册发现的小问题和记录贴,防止自己忘。我不知道这个手册是不是公开的,你们自己去华为下载
- PHP如何获取当前页完整URL及其参数 <? echo 'http://'.$_SERVER[&
- 前言相信看到这个题目,可能大家都觉得是一个老生常谈的月经topic了。一直以来其实把握一个“值传递”基本上就能理解各种情况了,不过最近遇到了
- 本文为大家分享了卸载oracle11g的详细教程,供大家参考,具体内容如下准备工作:关闭防火墙,关闭杀毒软件1、win+R 输入servic
- 作为互联网产品设计师,在和前端开发人员沟通时你是否常常会听到这样的声音: —— “大姐,给点专业精神好不好,这个表格是自适应的,你
- python cron定时任务触发接口自动化巡检定时任务触发方式有几种类型,日常的工作中,研发同学运用比较多的就是cron方式查了一下APS
- 如下所示:torch.mm(mat1, mat2, out=None) → Tensortorch.matmul(mat1, mat2, o
- 虚拟环境管理今天聊聊Python中虚拟环境的价值和常用命令。为什么会有虚拟环境?在实际项目开发中,我们通常会根据自己的需求去下载各种相应的框
- 作用:主要记录信息,便于定位查看问题。python logging模块官网:https://docs.python.org/zh-cn/3.
- 页面跳转页面跳转的url中必须在最后会自动添加【\】,所以在urls.py的路由表中需要对应添加【\】from django.shortcu
- 本文在上文的基础上重新实现支持多线程的服务器。以下为TCP客户端的程序代码:#!/usr/bin/env python3import sys
- ftp登陆连接from ftplib import FTP #加载ftp模块ftp=FTP() &n
- 一丶什么是索引索引是存储引擎快速找到记录的一种数据结构。数据库中的数据可以理解成字典中的单词,而索引就是目录,显而易见这是一种空间换时间的做
- 配置 thriftpython使用的包 thrift个人使用的python 编译器是pycharm community edition. 在
- 概述:前段时间在跟其他公司DBA交流时谈到了mysql跟PG之间在多表关联查询上的一些区别,相比之下mysql只有一种表连接类型:嵌套循环连
- 随机数参与的应用场景大家一定不会陌生,比如密码加盐时会在原密码上关联一串随机数,蒙特卡洛算法会通过随机数采样等等。Python内置的rand