js案例一 :方块拖动效果

1、点击方块p并随鼠标移动而移动，点击抬起，则不会随鼠标移动

注意：移动时是在document上移动的，所有移动的事件对象是document

<!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><style>*{padding: 0;margin: 0;}p{width: 100px;height: 100px;background: skyblue;position: relative;text-align: center;line-height: 100px;/* top: 0;left: 0; */}</style>
</head>
<body><p>移动</p><script>var pEle=document.querySelector('p')//鼠标按在p上并移动，p随之移动pEle.addEventListener('mousedown',function(e){  //事件监听中的事件类型要加引号，且不加on,兼容写法要加on//获取鼠标按下时事件对象的位置e=e ||window.eventvar xDown=e.offsetXvar yDown=e.offsetY//绑定鼠标移动事件,鼠标移动，p随之移动document.onmousemove=function(e){e=e ||window.eventvar x=e.clientX-xDownvar y=e.clientY -yDownpEle.style.top=y+'px'pEle.style.left=x+'px'}})//鼠标抬起，鼠标移动事件失效document.onmouseup=function(){document.onmousemove=null}</script>
</body>
</html>

js案例一 :方块拖动效果相关推荐

JS案例-仿京东放大镜效果
需要实现的效果图如下: ①布局:布局采用一个大盒子里面首先分为上下两个部分,然后下部分又分为左右两个部分.左边的盒子里面放了一个img和一个遮罩层cover,右边盒子里面放的是800*800的大图片, ...
JS实现容器模块左右拖动效果
JS实现容器模块左右拖动效果实际效果是鼠标点击上方颜色模块,左右拖动,根据拖动的距离来显示模块一共有7个颜色块代码如下 CSS #box {/*margin: 0 auto;*/width: ...
JS实现动态瀑布流及放大切换图片效果(js案例)
整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...
js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler
效果如下: 可以调整参数如下: CSDN下载地址: 上传到csdn 不见了等出现了再贴地址.. js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler-Javascript文档类资源-CSD ...
JS各种各样的拖动效果
<html> <head><title>拖动效果函数演示 by Longbill.cn</title> <style> body { fon ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
一行代码轻松实现拖动效果
写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上实现拖动效果. $ ...
video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置首先运行livego ...
jquery div拖动效果示例代码
jquery div拖动效果示例代码 div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过复制代码代码如下: <%@ ...
JS案例：使用对象、对象数组、正则表达式
JS案例:使用对象.对象数组.正则表达式 1.使用对象声明对象变量,其实就是将一个json对象赋给一个变量,可以看到json对象就由一些键值对构成. 运行效果: 如果将{id: 3, name: & ...

js案例一 :方块拖动效果

js案例一 :方块拖动效果相关推荐

最新文章

热门文章