js实现盒子拖拽动画效果
本文实例为大家分享了js实现盒子拖拽动画的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 400px;
height: 200px;
border: 1px solid #ccc;
border-right-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -100px;
box-sizing: border-box;
}
.wrap .head {
height: 40px;
padding-left: 4px;
padding-right: 4px;
background-color: #ccc;
box-sizing: border-box;
line-height: 40px;
user-select: none;
}
.head:hover {
cursor: move;
}
.head span {
float: left;
}
#close {
float: right;
}
#close:hover {
cursor: pointer;
}
</style>
</head>
<body>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<p>tom</p>
<div class="wrap">
<div class="head">
<span>试着拖拽我</span>
<span id="close">【关闭】</span>
</div>
</div>
<script>
let wrap = document.querySelector('.wrap');
let close = document.getElementById('close');
let head = document.querySelector('.head');
head.onmousedown = function (e) {
// 获得鼠标在 head 中的坐标
let x = e.pageX - wrap.offsetLeft;
let y = e.pageY - wrap.offsetTop;
console.log(x, y);
document.onmousemove = function (e) {
let xx = e.pageX - x;
let yy = e.pageY - y;
// 设置边界限制
xx = xx < 0 ? 0 : xx;
yy = yy < 0 ? 0 : yy;
if (xx >= innerWidth - wrap.offsetWidth) {
document.documentElement.scrollLeft = 20;
} else {
document.documentElement.scrollLeft = 0;
}
xx = xx > innerWidth - wrap.offsetWidth ? innerWidth-wrap.offsetWidth : xx;
yy = yy > innerHeight - wrap.offsetHeight + document.documentElement.scrollTop ? innerHeight - wrap.offsetHeight + document.documentElement.scrollTop : yy;
wrap.style.left = xx + 'px';
wrap.style.top = yy + 'px';
// 禁止X滚动轴
document.body.style.overflowX = 'hidden';
wrap.style.marginLeft = 0;
wrap.style.marginTop = 0;
};
};
document.onmouseup = function () {
document.onmousemove = null;
};
close.onclick = function () {
wrap.style.display = 'none';
};
</script>
</body>
</html>
实现效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
本文实例讲述了JS实现鼠标拖拽盒子移动及右键点击盒子消失效果.分享给大家供大家参考,具体如下: 1. 鼠标拖拽盒子移动效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } div{ width: 1
-
JS实现盒子拖拽效果
本文实例为大家分享了JS实现盒子拖拽效果的具体代码,供大家参考,具体内容如下 效果: html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
JavaScript实现拖拽盒子效果
本文实例为大家分享了JavaScript实现拖拽盒子效果的具体代码,供大家参考,具体内容如下 实现效果: 1.单击关闭,关闭盒子 2.点击左上方'点击注册',打开盒子 3.鼠标放在盒子上方蓝色区域显示十字 4.点击鼠标不松开就可移动盒子 5.松开鼠标图片暂停 实现步骤: 1.在页面最上方设置一个盒子,里面有一个超链接,超链接里面设置href="javascript:void(0);",再点击时不打开网页. 2.再设置一个可以拖拽的盒子,盒子嵌套一个蓝色盒子为的最上方的蓝色区域,蓝色盒子
-
js实现盒子拖拽动画效果
本文实例为大家分享了js实现盒子拖拽动画的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <style>
-
JS实现图片拖拽交换效果
JS实现图片拖拽交换效果,供大家参考,具体内容如下 听 WEB前端javascript企业实战班 公开课,用JS实现了图片拖拽交换的目的:感谢老师的讲解. 实现要点 鼠标点击onmousedown:获取鼠标在页面上可视区域的位置(clientX, clientY)和元素外边框距已定位父元素容器的位置(offsetLeft,offsetTop): 鼠标移动onmousemove: 获取鼠标在页面上可视区域的位置(clientX, clientY),并实时改变目标元素位置:进行碰撞检测,同时计算被碰
-
原生JS实现拖拽图片效果
本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: a
-
JS实现网站菜单拖拽移位效果的方法
本文实例讲述了JS实现网站菜单拖拽移位效果的方法.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的层手动实例,让网站的菜单可以拖拽移位,记得土豆网的"豆单"有这种功能.本效果还尚未彻底完成,部分地方因没有写入对应内容,因此JS可能会提示有错误. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-menu-tzyw-style-codes/ 具体代码如下: <html> <head>
-
JS实现六边形3D拖拽翻转效果的方法
效果图 实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q
-
使用JavaScript实现一个拖拽缩放效果
目录 前言 基本思路 拖拽实现 缩放实现 最后 前言 在写一个简单的H5页面时,需要实现如下的一个拖拽效果,找了半天未能找到符合要求的,含泪手写先来看一下我们要是实现一个怎样的效果 基本思路 鼠标摁下,记录元素的初始位置以及宽高 监听鼠标的移动,根据鼠标的移动不断改变自己的位置/宽高 是否存在边界限制 拖拽实现 我们常见的改变元素位置的方式有 定位 使用translate进行偏移 那我们现在用那种方式那实现拖拽呢?从功能实现上来看,这两个方式都能很好的实现我们的需求从性能上来看,translat
-
纯JS实现可拖拽表单的简单实例
因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然
-
Dropzone.js实现文件拖拽上传功能(附源码下载)
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示 源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&