首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,062 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,217 阅读
3
nps内网穿透实现外网访问树莓派
32,390 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,119 阅读
5
Typecho-Joe-Theme主题帮助文档
24,549 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
261
篇文章
累计收到
1,300
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
2
篇与
DIV
的结果
2022-04-14
鼠标拖拽移动DIV 记录一下
<template> <div class="vvhan-com"> <div class="title" @mousedown="mousedown">tips</div> <div class="contain"> <span>这里是内容</span> </div> </div> </template> <script> export default { data() { return {} }, methods: { mousedown(e) { // 被移动的主体 mainDiv const mainDiv = document.querySelector('.vvhan-com') // 鼠标点击位置与主体边的距离 const distanceX = e.clientX - mainDiv.offsetLeft const distanceY = e.clientY - mainDiv.offsetTop // 鼠标移动事件 document.onmousemove = function (ev) { const _e = ev || e //移动时,鼠标距离当前窗口x轴坐标 - 鼠标在拖拽元素的坐标 = 剩下距离body的x轴坐标 //将这个数值设置为拖拽元素的left、top let boxLeft = _e.clientX - distanceX; let boxTop = _e.clientY - distanceY; //获取body的页面可视宽高 const clientHeight = document.documentElement.clientHeight || document.body.clientHeight const clientWidth = document.documentElement.clientWidth || document.body.clientWidth //限制拖拽宽高 boxLeft = boxLeft < 0 ? 0 : boxLeft > clientWidth - mainDiv.offsetWidth ? clientWidth - mainDiv .offsetWidth : boxLeft boxTop = boxTop < 0 ? 0 : boxTop > clientHeight - mainDiv.offsetHeight ? clientHeight - mainDiv .offsetHeight : boxTop mainDiv.style.top = boxTop + 'px' mainDiv.style.left = boxLeft + 'px' } // 鼠标松开事件 结束拖拽 document.onmouseup = function () { document.onmousemove = null document.onmouseup = null } } } } </script> <style> body { position: relative !important; background: url('https://cache.4ce.cn/ipfs/QmQtvCE2DMkYJKWicdaJxh3Vh47ca6t25RxBGrbre5Cy2p'); background-size: cover; padding: 0; margin: 0; } </style> <style lang="scss" scoped> .vvhan-com { user-select: none; position: absolute !important; box-sizing: border-box; padding: 6px; top: 36px; right: 36px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); background-color: rgba(255, 255, 255, 0.2); width: 340px; z-index: 9; font-size: 14px; .title { margin-bottom: 6px; font-size: 16px; line-height: 28px; border-bottom: 1px rgba(0, 0, 0, .1) solid; cursor: move; } h1 { color: #000; } } </style>
2022年04月14日
225 阅读
0 评论
2 点赞
2021-10-19
一张图片或Div不同位置点击事件
代码示例<!-- * @Author: Han * @Date: 2021-10-27 17:34:01 * @LastEditors: Han * @LastEditTime: 2021-10-27 17:36:35 * @FilePath: \Projectc:\Users\Han\Desktop\Untitled-1.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>一张图片或Div不同位置点击事件</title> <style> div { position: relative; margin: 100px auto; width: 332px; height: 332px; border: 1px solid black; } div::before, div::after { content: ''; position: absolute; background: black; } div::before { height: 1px; width: 100%; top: 166px; } div::after { height: 100%; width: 1px; left: 166px; } </style> </style> </head> <body> <div> </div> <script> const btn = document.querySelector('div'); btn.onclick = function (e) { alert(`点击了${e.offsetX >= 166 ? '右' : '左'}${ e.offsetY >= 166 ? '下' : '上'}`) }; </script> </body> </html>
2021年10月19日
360 阅读
2 评论
2 点赞