js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数

首页

web前端

js教程

js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数_布局与层

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:45 PM

拖拽

//拖拽开始 
document.onmousemove = function (event) 
{ 
if (!bDrag) return; 
var event = event || window.event; 
var iL = event.clientX - disX; 
var iT = event.clientY - disY; 
var maxL = document.documentElement.clientWidth - oBox.offsetWidth; 
var maxT = document.documentElement.clientHeight - oBox.offsetHeight; 
iL = iL < 0 ? 0 : iL; 
iL = iL > maxL ? maxL : iL;

iT = iT < 0 ? 0 : iT; 
iT = iT > maxT ? maxT : iT; 
oBox.style.marginTop = oBox.style.marginLeft = 0; 
oBox.style.left = iL + "px"; 
oBox.style.top = iT + "px"; 
aPos.push({x:iL, y:iT}) 
status(); 
return false 
}; 
//鼠标释放, 结束拖拽 
document.onmouseup = window.onblur = oH2.onlosecapture = function () 
{ 
bDrag = false; 
oH2.releaseCapture && oH2.releaseCapture(); 
status() 
};

//回放拖动轨迹 
oA.onclick = function () 
{ 
if (aPos.length == 1) return; 
var timer = setInterval(function () 
{ 
var oPos = aPos.pop(); 
oPos ? (oBox.style.left = oPos.x + "px", oBox.style.top = oPos.y + "px", status()) : clearInterval(timer) 
}, 30);

this.focus = false;//去除链接虚线

return false 
};

//阻止冒泡 
oA.onmousedown = function (event) 
{ 
(event || window.event).cancelBubble = true 
};

//监听状态函数 
function status () 
{ 
aSpan[0].innerHTML = bDrag; 
aSpan[1].innerHTML = oBox.offsetTop; 
aSpan[2].innerHTML = oBox.offsetLeft 
}

//初始调用 
status() 
}; 
</script> 
 
 
<div id="box"> 
<h2 id="a-href-javascript-点击回放拖动轨迹-a"><a href="javascript:;">点击回放拖动轨迹</a></h2> 
<p><strong>Drag:</strong><span></span></p> 
<p><strong>offsetTop:</strong><span></span></p> 
<p><strong>offsetLeft:</strong><span></span></p> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何使用 JavaScript 实现图片的拖拽缩放功能？Oct 27, 2023 am 09:39 AM

如何使用JavaScript实现图片的拖拽缩放功能？在现代web开发中，实现图片的拖拽和缩放是常见的需求。通过使用JavaScript，我们可以轻松地为图片添加拖拽和缩放功能，提供更好的用户体验。在本篇文章中，将介绍如何使用JavaScript来实现这一功能，以及附有具体的代码示例。HTML结构首先，我们需要一个基本的HTML结构来展示图片，并为图片添

Vue 中实现拖拽选中及放置的技巧及最佳实践Jun 25, 2023 am 10:13 AM

Vue是一款流行的JavaScript框架，适合用于构建单页面应用(SPA)。其支持通过指令和组件等方式实现拖拽选中及放置的功能，为用户提供了更好的交互体验。本文将介绍在Vue中实现拖拽选中及放置的技巧及最佳实践。拖拽指令Vue提供了一个v-draggable指令，可以轻松地实现拖拽效果。该指令可以被应用于任何元素上，并且可以自定义拖拽的样

如何使用Vue实现拖拽排序特效Sep 20, 2023 pm 03:01 PM

如何使用Vue实现拖拽排序特效Vue.js是一款流行的JavaScript框架，它能够帮助我们构建交互性强的前端应用程序。在Vue中，我们可以很容易地实现拖拽排序特效，让用户可以通过拖动元素的方式进行数据排序。本文将介绍如何使用Vue实现拖拽排序特效，并提供具体的代码示例。首先，我们需要创建一个Vue的实例，并定义一个数组来存储要排序的数据。在示例中，我们将

Vue实战技巧：使用v-on指令处理鼠标拖拽事件Sep 15, 2023 am 08:24 AM

Vue实战技巧：使用v-on指令处理鼠标拖拽事件前言：Vue.js是一个流行的JavaScript框架，它的简洁易用和灵活性使得它成为了众多开发者的首选。在Vue应用开发中，处理用户交互事件是必不可少的一项技能。本文将介绍如何使用Vue的v-on指令来处理鼠标拖拽事件，并提供具体的代码示例。创建Vue实例：首先，在HTML文件中引入Vue.js的库文件：&

Vue 中如何实现拖拽元素的复制和移动？Jun 25, 2023 am 08:35 AM

Vue是一款流行的JavaScript框架，它提供了方便的拖拽功能，让我们可以轻易地实现元素的复制和移动。下面，我们就来看一下如何在Vue中实现拖拽元素的复制和移动。一、拖拽元素的基本实现在Vue中实现拖拽元素的复制和移动，首先需要实现元素的基本拖拽功能。具体实现方法如下：在模板中添加需要拖拽的元素：<divclass="drag-elem

Vue文档中的拖拽排序函数使用方法及效果Jun 20, 2023 am 09:22 AM

Vue是当今最热门的前端框架之一，它提供了丰富的功能和工具来帮助我们方便地开发各种Web应用程序。其中一个非常有用的功能是拖放，可以让用户将元素从页面上的一个位置拖到另一个位置。Vue提供了一些内置的指令和功能，使得创建和管理拖放操作变得非常容易，其中就包括拖拽排序函数。本文将介绍Vue文档中的拖拽排序函数使用方法及效果。什么是拖拽排序函数？拖拽排序函数是V

如何利用Layui实现图片拖拽和缩放效果Oct 24, 2023 am 09:16 AM

如何利用Layui实现图片拖拽和缩放效果在现代网页设计中，图片的交互效果成为增加网页活力和用户体验的重要手段。其中，图片拖拽和缩放效果是常见且受欢迎的交互方式之一。本文将介绍如何使用Layui框架实现图片拖拽和缩放效果，并提供具体的代码示例。一、引入Layui框架和相关依赖：首先，我们需要在HTML文件中引入Layui框架和相关依赖。可以通过以下代码示例引入

如何使用Vue实现拉钩拖拽特效Sep 19, 2023 pm 02:11 PM

如何使用Vue实现拉钩拖拽特效引言：在现代网页设计中，拖拽效果已经非常常见，它可以提高用户体验，增加交互性。而Vue作为一种流行的JavaScript框架，提供了许多方便的工具和库，可以轻松地实现拖拽特效。本文将介绍如何使用Vue实现拉钩拖拽特效，并提供具体的代码示例。一、准备工作在使用Vue实现拉钩拖拽特效之前，我们需要准备好以下工作：安装Vue框架。可以

See all articles