减缓拖拽速度
Slow down dragging speed?
本文关键字:速度 更新时间:2023-09-26
我使用以下函数拖动div:
function enableDragging(ele, ell) {
var dragging = dragging || false,
x, y, Ox, Oy,
current;
enableDragging.z = enableDragging.z || 1;
var grabber = document.getElementById(ell);
grabber.onmousedown = function (ev) {
ev = ev || window.event;
var target = ev.target || ev.srcElement;
current = target.parentNode;
dragging = true;
x = ev.clientX + 2;
y = ev.clientY + 2;
Ox = current.offsetLeft;
Oy = current.offsetTop;
current.style.zIndex = ++enableDragging.z;
var viewportWidth = viewport().width;
var viewportHeight = viewport().height;
document.onmousemove = function (ev) {
ev = ev || window.event;
if (dragging == true) {
var Sx = parseFloat(ev.clientX) - x + Ox;
var Sy = parseFloat(ev.clientY) - y + Oy;
current.style.left = Math.min(Math.max(Sx, Math.min(viewport().width - Sx, 0)), viewportWidth - current.offsetWidth) + "px";
current.style.top = Math.min(Math.max(Sy, Math.min(viewport().height - Sy, 0)), viewportHeight - current.offsetHeight) + "px";
}
}
document.onselectstart = function () {
return false;
};
document.onmouseup = function (ev) {
ev = ev || window.event;
dragging && (dragging = false);
if (ev.preventDefault) {
ev.preventDefault();
}
}
document.body.style.MozUserSelect = "none";
document.body.style.cursor = "default";
return false;
};
}
function viewport() {
var e = window
, a = 'inner';
if ( !( 'innerWidth' in window ) ) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}
我是这样开始拖动的:
var ele = document.getElementById("snapifyWrapper");
enableDragging(ele, 'hndl');
我想弄清楚我怎么能使拖慢?我想减慢div被拖拽的速度
在您的document.onmousemove()
函数中,也许在移动current
对象之前检查Sx
和Sy
与x
和y
是否足够不同?
因此指定一个阈值,并在移动对象之前与它进行比较。
// need to have displacement of 10px before moving the object
var threshold = 10;
var getAbs = Math.abs; // local reference to Math.abs() function
document.onmousemove = function (ev) {
ev = ev || window.event;
if (dragging == true) {
var Sx = parseFloat(ev.clientX) - x + Ox;
var Sy = parseFloat(ev.clientY) - y + Oy;
if (getAbs(Sx) > threshold || getAabs(Sy) > threshold) {
// move it
current.style.left = Math.min(Math.max(Sx, Math.min(viewport().width - Sx, 0)), viewportWidth - current.offsetWidth) + "px";
current.style.top = Math.min(Math.max(Sy, Math.min(viewport().height - Sy, 0)), viewportHeight - current.offsetHeight) + "px";
}
}
}
您还可以添加timer
来指定mousemove记录坐标的时间。
相关文章:
- Wacom stu-430签名捕获速度太慢
- 如何在速度模板中获取LiferayPortlet实例id
- 我想放慢html中进程栏的速度
- Knockout绑定大量数据的速度较慢
- Wordpress:未捕获引用错误:未定义速度
- 即使光标位于屏幕边缘,也可以跟踪鼠标速度
- Css优化谷歌页面速度洞察
- fullcalendar在删除导致浏览器挂起的多个事件时速度较慢
- 录制速度javascript
- Javascript图像数组预加载速度和从内存中删除
- 谷歌地图多边形减慢浏览器速度
- nodejs/ccurlhttp请求与postlerrest客户端相比速度较慢
- 从Three.js场景中删除许多对象的速度较慢
- 构建多个图表时,HighCharts加载数据的速度较慢
- jQuery.length()速度含义
- AMD应用程序在浏览器中的加载速度是否快于CommonJS应用程序
- 如何在不影响网站页面速度的情况下在我的网站上使用谷歌字体
- get_browser降低页面加载速度,任何其他选择
- 画布动画似乎不会以60帧/秒的速度运行
- Html画布绘制速度因画布元素过多而减慢