网页模拟QQ面板的拖动效果

博主的前端入门知识是在慕课网学的,当时有个demo,就是在网页模拟一个QQ面板的拖动效果(如图,用两个DIV代替。。。效果是拖动中间的DIV,整个DIV跟着移动),今天来总结记录一下。

思路是当鼠标按下时,开始计算元素距离屏幕左边缘和上边缘的距离,并同步赋予元素。这里的关键点是对于JS中元素与根元素(或者指定父级元素)的距离的运用,即offset。

首先假设外层盒子叫d1,中间盒子叫center。当鼠标在center按下时为d1添加事件:

// JavaScript Document

function drag() {

"use strict";

var ce = document.getElementsByTagName("div")[1];

ce.onmousedown = client; //获取中间盒子,按下鼠标时添加事件

}

并且获取d1的当前位置(clientX,clientY)(这里的参照系是当前窗口,若将浏览器窗口缩小,则可移动区域减小),再获取d1距离窗口边缘的位置坐标(offsetLeft,offsetTop),此处没有设置参考的父元素,所以以根元素为参照物,即body。

取两者差值,就是整个DIV应该变化的坐标量。这时将d1的坐标与变化量相加,就得到了整个DIV的新坐标值。用onmousemove随时更新DIV的坐标,就得到了拖动的效果。

function client(eve) {

"use strict";

eve = eve || window.event; //兼容性

var d1 = document.getElementById("d1");

var disX = eve.clientX - d1.offsetLeft,

disY = eve.clientY - d1.offsetTop;

document.onmousemove = function (event) {

event = event || window.event;

mov(event, disX, disY);

};

document.onmouseup = function () {

document.onmousemove = null;

document.onmouseup = null; //释放鼠标时清空事件

};

}

为防止盒子移动到窗口外面,需要进行边缘检测,由于窗口的坐标系以屏幕左上角为原点,所以左边检测和上边检测只需要看鼠标的坐标-d1距离窗口左边/上边的距离是否等于0就行。

右侧检测需要计算盒子距离左边缘的距离+盒子本身的宽度是否超过了浏览器窗口本身的宽度,浏览器本身可见区域的宽度为clientWidth,盒子本身的宽度是d1.offsetWidth,这两者的差就是鼠标在x方向移动的最大值。当鼠标移动到最大值时说明盒子已经移动到了右侧屏幕边缘。底部与右侧相似。

function mov(e, posx, posy) {

"use strict";

e = e || window.event;

var d1 = document.getElementById("d1");

var l = e.clientX - posx,

h = e.clientY - posy;

var r = document.documentElement.clientWidth - d1.offsetWidth || document.body.clientWidth - d1.offsetWidth; //兼容性获取当前窗口的宽度-d1盒子的宽度

var b = document.documentElement.clientHeight - d1.offsetHeight || document.body.clientWidth - d1.offsetWidth; //兼容性获取当前窗口的高度-d1盒子的高度

if (l <= 0) {l = 0;}

if (h <= 0) {h = 0;}

if (l >= r) {l = r;}

if (h >= b) {h = b;} //设置坐标,使盒子不超出窗口

//  document.title=e.clientX+","+e.clientY;

d1.style.left = l + "px";

d1.style.top = h + "px";

}

原文地址:https://www.cnblogs.com/wz71014q/p/8516632.html

时间: 2024-11-07 10:41:48

网页模拟QQ面板的拖动效果的相关文章

js 模拟QQ聊天窗口图片播放效果(带滚轮缩放)

页面效果如下: 完整代码如下: <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/3c6d55fbb2fb4316352d920a22a4462309f7d394.jpg" class="pop_img

模拟QQ系统设置面板实现功能

业务需求: 基于网盘客户端的实现,原有网盘的设置面板无论从界面显示还是从业务需求都不能满足我们的正常需求.当前的要求是,模拟QQ系统设置的面板实现当前我们网盘中的基本配置功能.在完成这篇文章时已将基本功能实现完成,虽未整合进网盘客户端中,但基本技术预演已经实现. QQ系统设置面板分析: QQ系统设置面板效果图: QQ系统设置面板功能描述: 由于存在较多的配置,如果每个模块的配置项都设计到一个窗体中,则会存在很多的窗体,不太符合用户的使用体验,且程序编写也比较麻烦.QQ系统设置面板中的实现是,所有

【大话QT之八】模拟QQ系统设置面板实现功能

业务需求: 基于网盘客户端的实现,原有网盘的设置面板无论从界面显示还是从业务需求都不能满足我们的正常需求.当前的要求是,模拟QQ系统设置的面板实现当前我们网盘中的基本配置功能.在完成这篇文章时已将基本功能实现完成,虽未整合进网盘客户端中,但基本技术预演已经实现. QQ系统设置面板分析: QQ系统设置面板效果图: QQ系统设置面板功能描述: 由于存在较多的配置,如果每个模块的配置项都设计到一个窗体中,则会存在很多的窗体,不太符合用户的使用体验,且程序编写也比较麻烦.QQ系统设置面板中的实现是,所有

鼠标在网页上的拖动效果

使用JavaScript写的鼠标拖动效果 近日项目中要做一个鼠标拖拽层的效果,于是手动使用Jquery做了一个,发出来跟大伙儿分享一下,并希望能得到高手的指点,如果哪位大侠觉得我的思路和代码不正确或者需要改进的话,希望能指点一二,在下感激不尽. 效果展示 下面是我的源代码 <html> <head> <style> div{ width:200px; height:200px; background-color:red; position:absolute; } <

使用jquery实现简单的拖动效果,分享源码

因为想实现相框的拖到,找了半天的原因愣是没有找到错误,所以,只能翻看源码了 如何实现拖动效果? 浏览DEMO 首先分析下拖动效果原理: 1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事件,且鼠标在对象上方) 2.开始移动鼠标(触发onmousemove事件) 3.移动时更显对象的top和left值 4.鼠标放开停止拖动(触发onmouseup事件) 注意:拖动的对象必须是定位对象(即设置了position:absolute或 relative). 也就是说拖动事件=onmoused

运用HTML5原生拖动事件(drag)实现拖动效果

拖动效果相信很多朋友都自己写过,不管你用原生JS还是Jquery要实现起来也很简单,但是今天我想介绍的是运用HTML5标准中定义的原生拖动事件实现拖动效果. 一.背景: 其实说是HTML5标准定义,其实最早在IE4中就有拖放功能的API,只是在IE4中,网页中只有两种对象可以拖放:图像和某些文本.并且在IE4中唯一有效的放置目标是文本框.到了IE5.5,拖放功能得到了扩展,让网页中的任何元素都可以拖放.最终HTML5以IE的实力为基础制定了拖放规范.FF3.5+,Safari3+和Chrome根

笔记本1080分辨率下QQ面板字体修改

买了台新的笔记本,终于用上了高大上的1080分辨率,但是在我的笔记本的1080分辨率下QQ面板字体显示很小,肿么办?于是百度了下,看到这一篇文章,转载过来 QQ2011面板字体修改 QQ2011字体修改自己也是在学习,略知一二,修改QQ字体和颜色,主要涉及到腾讯QQ的加密文件gmd,,而gmd文件成百上千,多如牛毛,里面的语言调用代码颇为复杂,还有很多的地方未能发现和修改.1.修改的路径:(本人滴QQ安装路径)D:\Program Files\Tencent\Resource.1.71.3019

Java实现模拟QQ空间图片上传

Java实现模拟QQ空间图片上传 首先看效果: 首先编写我们的上传jsp代码,如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://

JS+CSS打造仿QQ面板的三级折叠下拉菜单

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS+CSS打造仿QQ面板的三级折叠下拉菜单-石家庄地毯</title> <style type="text/css"> *{ margin:0px; padding:0px; border:0p