目标元素拖动

	<div class="box"><div class="title">拖拽效果</div></div>
		* {margin: 0;padding: 0;}.box {width: 350px;height: 300px;border: 1px solid #ccc;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);cursor: move;/* 禁止用户选中 */user-select: none;}.title {width: 100%;height: 50px;line-height: 50px;font-weight: 700;font-size: 30px;color: #fff;text-align: center;border-bottom: 1px solid #ccc;background-color: orange;}
<script>var box = document.querySelector('.box');box.onmousedown = function(e){//获取鼠标按下时候的位置var mx = e.clientX - this.offsetLeft;var my = e.clientY - this.offsetTop;//获取鼠标移动后的距离document.onmousemove = function(e){var xlength = e.clientX - mx;var ylength = e.clientY - my;box.style.left = xlength + 'px';box.style.top = ylength + 'px';}}//鼠标抬起box.onmouseup = function() {//移除事件document.onmousemove = null;}</script>

实现效果:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248177.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

操作系统原理之内存管理(第四章第二部分)

一、基本分页存储管理方式 1、分⻚存储管理的基本原理&#xff1a; 页&#xff1a;将⼀个进程的逻辑地址空间分成若⼲个⼤⼩相等的⽚页框&#xff1a;将物理内存空间分成与⻚⼤⼩相同的若⼲个存储块分⻚存储&#xff1a;将进程中的若⼲⻚分别装⼊多个可以不相邻的⻚框中页内碎片…

C#代码总结02---使用泛型来获取Asp前台页面全部控件,并进行属性修改

该方法&#xff1a;主要用于对前台页面的不同类型&#xff08;TextBox、DropDownList、等&#xff09;或全部控件进行批量操作&#xff0c;用于批量修改其属性&#xff08;如&#xff0c;Text、Enable&#xff09;。 private void GetControlList<T>(ControlCollection c…

d3.js 教程 模仿echarts柱状图

由于最近工作不是很忙&#xff0c;隧由把之前的charts项目用d3.js重写的一下&#xff0c;其实d3.js文档很多&#xff0c;但是入门不是很难&#xff0c;可是想真的能做一个完成的&#xff0c;交互良好的图还是要下一番功夫的。今天在echarts找到了一个柱状图&#xff0c;如图。 …

简单的动画函数封装(2)

<div></div><!-- <span></span> --><button class"btn1">点击500</button><button class"btn2">点击800</button>div{width: 100px;height: 100px;background-color: red;position: absolute;top: …

【蔡勒公式 】根据给定的年月日求出对应星期几

蔡勒公式 蔡勒&#xff08;Zeller&#xff09;公式&#xff0c;是一个计算星期的公式&#xff0c;随便给一个日期&#xff0c;就能用这个公式推算出是星期几。时间复杂度&#xff1a;O(1)。具体的在红书P229有。 若要计算的日期是在1582年10月4日或之前&#xff0c;公式则为&am…

MFC的程序,不想显示窗口,任务栏里也不显示

在dialog的oninitdialog里设置如下属性&#xff0c;很简单&#xff0c;网上一些乱七八糟的做法&#xff0c;一行代码就能搞定啊 SetWindowPos(&CWnd::wndNoTopMost,0,0,0,0,SWP_HIDEWINDOW); ModifyStyleEx(WS_EX_APPWINDOW, WS_EX_TOOLWINDOW); 转载于:https://www.cnblog…

放大镜制作(2)—此方法比较容易理解

<div class"box" id"box"><!--左侧的盒子--><div class"left_img"><!--图片--><img src"images/small.jpg" class"aaa" alt"小图片"/><!--黄色小盒子--><div class"…

call / apply / bind

对于 call / apply / bind 来说&#xff0c;他们的首要目的是用于改变执行上下文的 this 指针。 call / apply 对 call / apply 的使用&#xff0c;一般都如下&#xff0c;用于改变执行环境的上下文。只是 call 接受的是一个一个的参数&#xff0c;而 apply 则是接受的是一个参…

js(Dom+Bom)第八天—Swiper(插件)

Swiper插件(库) 01-基本介绍 Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架&#xff0c;使用硬件加速过渡&#xff08;如果该设备支持的话&#xff09;。主要使用于移动端的网站、移动web apps&#xff0c;native apps和hybrid apps。主要是为IOS而设计的&#xff…

第七节:EF Core调用SQL语句和存储过程

一. 查询类(FromSql) 1.说明 A. SQL查询必须返回实体的所有属性字段。 B. 结果集中的列名必须与属性映射到的列名相匹配。 C. SQL查询不能包含关联数据 D. 除Select以为的其它SQL语句无法运行。 2.调用SQL语句的几种情况 A. 基本的原生SQL查询 B. 利用$内插语法进行传递 C. 原生…

没用的一些水货

1. 不递归的子函数加上inline会跑的很快。 2. 在稠密图中用dijkstra堆优化会导致跑的很慢。 3. 连着开几个数组的话&#xff0c;有可能越界了评测机却返回WA。 4. 如果你用的Dev-C&#xff0c;那么有的时候会出现一些莫名其妙的编译错误。请检查是否存在未关闭的代码生成的.exe…

js(Dom+Bom)第八天

JavaScript 移动端事件介绍 touch事件类型 移动设备上无法使用鼠标&#xff0c;当手指按下屏幕的时候会触发 click,mousedown,mouseup事件&#xff0c;但是在移动设备上有专门的事件&#xff1a; touch 备注&#xff1a; 在移动端touch事件需要通过事件监听的方式添加touchsta…

程序员计算器HEX、EDC、OCT等等的意思

binary 二进制 对应的是 BINoctal 八进制的 ---- OCThexadecimal 十六进制的 --- HEXdecimal 十进制的 -- DEC 转载于:https://www.cnblogs.com/132818Creator/p/11459984.html

为什么mysql 5.7.24启停不显示错误信息?log-error_verbosity参数

关键词&#xff1a;log-error_verbosity &#xff0c;mysql启停没有信息&#xff0c;mysql启停不显示错误信息&#xff0c;mysql不显示启停信息 原因就是因为 log-error_verbosity 2 被设置成了1/2&#xff0c;需要设置成3才行。 转载自&#xff1a;https://www.cnblogs.com/k…

ASP.NET Core 3.0中使用动态控制器路由

原文&#xff1a;Dynamic controller routing in ASP.NET Core 3.0 作者&#xff1a;Filip W 译文&#xff1a;https://www.cnblogs.com/lwqlun/p/11461657.html 译者&#xff1a;Lamond Lu 译者注 今天在网上看到了这篇关于ASP.NET Core动态路由的文章&#xff0c;感觉蛮有意思…

Petrozavodsk Winter Camp, Warsaw U, 2014, A The Carpet

一个地图上有若干障碍&#xff0c;问允许出现一个障碍的最大子矩形为多大&#xff1f; 最大子矩形改编 #include<bits/stdc.h> using namespace std; #define rep(i, j, k) for (int i int(j); i < int(k); i) #define dwn(i, j, k) for (int i int(j); i > int…

d3.js 教程 模仿echarts折线图

今天我们来仿echarts折线图,这个图在echarts是折线图堆叠&#xff0c;但是我用d3改造成了普通的折线图&#xff0c;只为了大家学习&#xff08;其实在简单的写一个布局就可以&#xff09;。废话不多说商行代码。 1 制作 Line 类 class Line {constructor() {this._width 1100;…

vue中v-for的使用

本人正在开始学习Vue,每天写写基础的记录,希望对大家有帮助,如有错误还望指出,我也是一个小白,也希望大家能一起进步 v-for指令的使用: 1.循环普通数组 item in list 中的item是自己个想写什么名写什么名 另一种写法 i 表示索引值 2.循环对象数组 3.循环普通对象 4.迭代数字 注…

js高级第一天

JavaScript面向对象 1.1两大编程思想&#xff1a; 1、面向过程 ​ 面向过程&#xff1a;POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤&#xff0c;然后用函数把这些步骤一步一步实现&#xff0c;使用的时候再一个一个的依次调用就可以了。 ​…