<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style>
#dragdiv {position : absolute;left:0px;top:0px;border:solid 1px;height:100px;width:100px;}
</style>
</head>
<body>
<div id="dragdiv" onmousedown="dragstart(event , this)"></div>
<script>
var boxModel = !/msie/i.test(navigator.userAgent) || document.compatMode == "CSS1Compat";
function getDocScroll(name) {
var arr = name == 'Left' ? ['pageXOffset' , 'scrollLeft'] : ['pageYOffset' , 'scrollTop'];
return window[arr[0]] || boxModel && document.documentElement[arr[1]] || document.body[arr[1]] ;
}
function getElementPos(el) {
var left = el.offsetLeft , top = el.offsetTop ;
while(el = el.offsetParant) {
left += el.offsetLeft;
top += el.offsetTop;
}
return {
left : left ,
top : top
};
}
var bDrag = false , eldrag = null ;
function dragstart(e , el) {
e = e || window.event;
var p = getElementPos(el);
var sl = getDocScroll('Left');
var st = getDocScroll('Top');
el.deltaX = e.clientX + sl - p.left;
el.deltaY = e.clientY + st - p.top;
bDrag = true;
eldrag = el;
if (eldrag.setCapture) eldrag.setCapture();
eldrag.onlosecapture = function() { document.onmouseup(); }
}
document.onmousemove = function(e) {
if(!bDrag) return;
e = e || window.event;
var sl = getDocScroll('Left');
var st = getDocScroll('Top');
var x = sl + e.clientX - eldrag.deltaX;
var y = st + e.clientY - eldrag.deltaY;
eldrag.style.left = x + 'px';
eldrag.style.top = y + 'px';
};
document.onmouseup = function() {
if(!bDrag) return;
if (eldrag.releaseCapture) eldrag.releaseCapture();
document.body.focus();
bDrag = false;
eldrag = null;
};
</script>
</body>
</html>
分享到：
相关推荐
总结起来，"dialog自制简单拖拽弹框"涉及的主要知识点包括：jQuery库的使用、DOM操作、事件监听与处理（mousedown, mousemove, mouseup）、CSS样式控制（尤其是定位和尺寸调整）、模态与非模态的实现。通过学习和...
"js制作简单拖拽效果.zip"这个压缩包文件包含了一个实现基本拖拽功能的示例，适用于网页开发中的各种场景，如布局调整、图片拖放等。下面我们将深入探讨JavaScript实现拖拽效果的关键知识点。 首先，我们需要理解...
简易拖动面板的制作，分为拖动的目标，拖动的元素，拖动范围
这个“简单拖拽控件的示例操作”旨在展示如何实现这样的功能，并让用户了解其工作原理。 首先，我们来看“拖动”这一动作。在网页或应用中，拖动通常涉及到鼠标或触摸设备的按住、移动和释放等事件。在HTML5中，`...
"jQuery简单拖拽层"是一个功能，允许用户通过鼠标操作将页面上的元素（如div、图像等）拖动到不同的位置，增强用户交互体验。这个功能在创建可自定义布局、设置窗口位置或构建拖放式界面时非常有用。 实现jQuery...
javaScript实现DIV简单拖拽
在JavaScript（JS）中实现表单的简单拖拽特效是一项常见的前端交互技术，它能够提升用户的操作体验，使用户能够通过鼠标轻松移动页面元素。在这个压缩包“JS实现的表单简单拖拽特效源码.zip”中，包含了必要的代码...
本文详细介绍了使用JavaScript实现简单拖拽效果的完整过程，包括关键的DOM事件和逻辑处理，适合对前端开发感兴趣的读者学习和参考。 在实现拖拽功能时，通常涉及三个关键的鼠标事件：`mousedown`、`mousemove`和`...
本教程将探讨如何创建一个简单的自定义View，实现类似于腾讯QQ中的红点拖动效果，但并不是完全复刻这一功能。我们将创建一个可拖动的点，当松开手指时，该点会自动返回到初始位置。 首先，我们需要创建一个新的Java...
《jQuery图片裁切预览与简单拖动技术详解》 在网页开发中，图片的裁切和预览功能是常见的需求，特别是在用户上传照片时，需要提供一种方式让用户自行调整图片大小和位置，以达到理想的展示效果。jQuery库以其丰富的...
ncm转MP3 简单拖动即可实现
在这个“C#实现简单的拖拽功能”的项目中，开发者使用了Visual Studio 2017来创建了一个能处理图片拖放的示例应用。以下是关于C#中实现拖放功能的关键知识点： 1. **Windows Forms**：这个项目基于Windows Forms...
### vb.net最简单的方法实现无边框窗体拖动 在.NET Framework中，使用Visual Basic.NET（简称VB.NET）开发应用程序时，有时我们希望创建一个没有标准边框和标题栏的自定义窗口。这种类型的窗口通常用于特殊界面设计...
本篇文章将详细探讨“简易而又灵活的Javascript拖拽框架”，即Drag5。 首先，Drag5框架的核心特性在于其简单性和灵活性。简单性体现在它易于理解和使用，开发者无需深入理解复杂的底层实现，即可快速上手。灵活性则...
要实现"拖拽元素到指定的对应位置"，我们需要在`.droppable()`的`drop`回调函数中处理逻辑。当拖动元素被释放时，可以根据需要调整其位置，例如将其插入到目标元素的特定子元素后面，或者改变其CSS样式以适应新位置...
在网页开发中，"拖拽+拖拽改变div大小"是一种常见的交互设计，它允许用户通过鼠标拖动来调整div元素的尺寸。这种功能在创建可定制的布局、图形编辑工具或者任何需要用户自定义区域大小的应用中非常有用。本文将深入...
"jquery实现简单图片的拖动"这个主题是关于如何利用jQuery的API来实现图片元素的拖放功能，这是一个常见的交互设计，使得用户可以通过鼠标拖动图片在页面上自由移动。 在jQuery中，实现图片拖动主要涉及到`...
用JQuery写的拖动元素进行排序的方法，包含拖动排序、拖动移除、拖动添加。 代码完整可用。没有用到第三方插件，自主可控。 原理是用CSS中position定位来跟踪鼠标移动，就是让元素跟踪鼠标位置，然后判断其在页面...