简单拖拽实现

最新推荐文章于 2024-05-08 14:55:24 发布
最新推荐文章于 2024-05-08 14:55:24 发布
阅读量82 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54242568/article/details/128124152
版权

<!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>Document</title>

</head>

<style>

div{

height: 200px;

width: 200px;

background-color: brown;

box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.7);

border-radius: 15px;

position: absolute;

left: 500px;

top: 200px;

padding: 24px;

}

nav{

margin: 27px auto 0;

position: relative;

width: 150px;

height: 20px;

background-color: #34495e;

border-radius: 5px;

font-size: 0;

}

nav span{

display: block;

}

nav a {

line-height: 50px;

height: 100%;

font-size: 15px;

display: inline-block;

position: relative;

z-index: 1;

text-decoration: none;

text-transform: uppercase;

text-align: center;

color: white;

cursor: pointer;

}

nav .animation {

position: absolute;

height: 100%;

top: 0;

z-index: 0;

transform: all .5s ease 0s;

border-radius: 5px;

}

a:nth-child(1){

width: 10px;

}

a:nth-child(2){

width: 20px;

}

a:nth-child(3){

width: 10px;

}

a:nth-child(4){

width: 30px;

}

a:nth-child(5){

width: 20px;

}

nav .start-home, a:nth-child(1):hover~.animation{

width: 10px;

left: 0;

background-color: #1abc9c;

}

nav .start-home, a:nth-child(2):hover~.animation{

width: 20px;

left: 0;

background-color: #e74c3c;

}

nav .start-home, a:nth-child(3):hover~.animation{

width: 10px;

left: 0;

background-color: #3498db;

}

nav .start-home, a:nth-child(4):hover~.animation{

width: 30px;

left: 0;

background-color: #9b59b6;

}

nav .start-home, a:nth-child(5):hover~.animation{

width: 20px;

left: 0;

background-color: #e67e22;

}

</style>

<body>

<div>

<nav>

<a href="#">1</a>

<a href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<div class="animation start-home" style="display: block;"></div>

</nav>

</div>

</body>

<script>

let box = document.querySelector('div')

let flag = true

box.addEventListener('mousedown',(e)=>{

flag = true

let x = e.offsetX

let y = e.offsetY

document.addEventListener('mousemove',(e)=>{

let divLeft = e.clientX - x

let divTop = e.clientY - y

if(flag){

box.style.top = divTop + 'px'

box.style.left = divLeft + 'px'

}

})

})

document.addEventListener('mouseup',(e)=>{

flag = false

})

</script>

</html>

玉兰花下,衣袖沾香
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
改善用户体验的alert提示效果
YTFUNLOVE的BLOG
12-30 801
cesh);" /> //Author:Daviv//Blog:http://blog.163.com/jxdawei" target="_blank">http://blog.163.com/jxdawei//Date:2006-10-28//Email:jxdawei@gmail.com   function sAlert(str){   var msgw,msgh,bordercolor;
JS网页实例：若干秒后不操作自动关闭窗口
请叫我二狗哥
11-17 1329
对一些安全要求比较高的网页，如网银和支付平台界面，为了保证用户数据安全，往往会提供这样的功能：若用户在累计的一段时间内没有进行任何操作，就会自动退出登陆或直接关闭窗口。补充下面代码，要求若用户每5秒内没有点击页面，窗口自动关闭。
javascript获取元素样式
qq_63273144的博客
09-25 1463
3.window必须加，因为如果不写的话，getComputedStyle会被当作是一个变量，在ie8及以下的浏览器中，如果这个变量找不到，就会去全局中去找，找不到的话就会报错。style读取的是内联样式，即写在元素style属性上的样式，而getComputedStyle是读取的最终样式，包括。if(window.getComputedStyle){ //判断浏览器中是否有这个对象，这个window必须加。注意，在这两个方法中，读取到的样式都是只读的不能修改。这个方法是window对象的方法，
js元素样式设置方式
qq_45907365的博客
03-23 698
对以下代码用js设置样式有几种方法
js实现简易拖拽的示例
01-18
简易拖拽 目录 代码实例 代码解析 scrollWidth,clientWidth,offsetWidth的区别 offsetX,clientX,pageX的辨析 下载源码链接  代码实例 <div id=box xss=removed></div> (function () { var dragging = false ...
Vue实现简单的拖拽效果
10-14
在Vue.js中，实现简单的拖拽效果主要依赖于自定义指令（Custom Directive）以及JavaScript的事件监听机制。本文将深入探讨如何使用Vue自定义指令来创建一个基础的拖拽功能，包括理解指令修饰符（Modifiers）、事件...
Unity UGUI实现简单拖拽图片功能
08-19
Unity UGUI实现简单拖拽图片功能 在 Unity 中实现拖拽图片功能是非常常见的需求，特别是在制作游戏、交互式应用程序时。在本文中，我们将详细介绍如何使用 Unity UGUI 实现简单拖拽图片功能。 UGUI 坐标系统 -----...
javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)
10-28
javascript简单拖拽，简单拖拽实现
JavaScript 操作元素案例
qq_52476758的博客
12-11 571
操作元素案例 1. 点击按钮，显示当前时间 <body> <button>显示当前系统时间</button> <div>某个时间</div> <script> // element.innerText() var btn=document.querySelector("button"); var div=document.querySelector("div");
【Java 进阶篇】JavaScript电灯开关案例：从原理到实现
繁依Fanyi的博客
10-15 1364
在这个案例中，我们将创建一个网页，上面有一个电灯和一个按钮。按钮可以切换电灯的开关状态，当电灯亮起时，背景颜色将变成黄色；当电灯关闭时，背景颜色将变成灰色。HTML结构：创建HTML元素，包括按钮和灯。CSS样式：定义按钮、灯和页面的样式。JavaScript交互：通过JavaScript来实现按钮与灯的交互。在这篇博客中，我们通过一个电灯开关案例详细介绍了HTML、CSS和JavaScript的结合使用。我们创建了一个包含按钮和电灯的网页，通过JavaScript来实现了电灯的开关功能。
点击开关按钮，js实现电灯开关效果
qq_53983648的博客
11-22 5991
js实现开关灯效果
JS+CSS实现带关闭按钮的DIV弹出窗口
11-12 1485
JS+CSS实现带关闭按钮的DIV弹出窗口 function    locking(){ document.all.ly.style.display="block"; document.all.ly.style.width=document.body.clientWidth; document.all.ly.style.height=document.body.clientHeight
JavaScript零基础入门 9：JavaScript读取元素的样式_javascript中获取元素的样式信息
最新发布
fksdskjfzxklzk的博客
05-08 604
我是云韵
js获取某个div的style
u011498933的专栏
03-22 3450
^^^^^^^^^^^^^^ 1、获取改div的width $("#mydiv_sel").width(); 2、获取改div的height $("#mydiv_sel").height(); 3、获取改div的left $("#mydiv_sel").offset().left; 4、获取改div的top $("#mydiv_sel").offset().top;
JS获取元素所有样式属性
weixin_45060872的博客
04-11 2248
getComputedStyle getComputedStyle:获取元素所有的样式 参数1:要获取样式的对象 参数2:伪元素,一般不传,默认为null 返回值:是样式对象 获取元素属性的特点： 1.可以获取行内 也可以获取行外 2.获取的是字符串，带单位 3.获取的元素为只读，不能修改 <!DOCTYPE html> <html> <head> &lt...
JavaScript获取元素的样式
weixin_57773213的博客
04-28 1574
注意共有3个步骤，按顺序操作下去 1.通过style属性获取/修改样式元素.style.样式名=样式值 读取方式：元素.style.样式名 通过style属性设置和读取的都是内联样式 2.获取元素内联样式属性 3.需要获取样式的元素可以传递一个伪元素，一般都传null说明：该方法返回一个对象，对象中封装了当前元素对应的样式， varobj=getComputedStyle(element,null); //该方法的使用说明 获取元素显示样式： obj.属性名 或则obj["属
js5秒关闭当前页面
weixin_34336292的博客
07-01 1335
2019独角兽企业重金招聘Python工程师标准>>> ...
js中style,currentStyle和getComputedStyle的区别
农村的我的专栏
11-09 1100
周末写了个原生的animation组件，其中使用原生的document.getElementByIdx_x_x('...').style来获取元素的相关样式值，但是奇怪的是获取不到相应的值： body{margin:0 auto;text-align:center;} div{position:relative;left:10px;} var dom1 =
DOM盒子模型
qq_37200686的博客
03-14 426
css盒子模型 DOM盒子模型 通过js提供的一些方法获取页面中的样式信息，下面就是我们获取样式信息的一系列方法 计算联合样式 内容的宽度和高度：我们设置的width/height这两个样式就是内容的宽和高；如果没有设置height，容器的高度会根据里面内容自己进行适应，这样获取的值就是真实内容的高；如果设置固定高度，不管内容是多了还是少了，其实我们的内容高度指的都是设定的那个值； ...
实现一个简单的react拖拽组件
01-30
好的，我会尽力帮助你实现一个简单的 React 拖拽组件。 首先，你需要引入 `react-dnd` 库。这个库提供了一些高阶组件（Higher Order Components）和接口，可以帮助你实现拖拽功能。 然后，你可以使用 `DragSource`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值