<style>
.dragArea{
background-color:blue;
filter:alpha(opacity=50);
-moz-opacity:0.5;
}
body{
margin:0px;
}
</style>
<body>
<div style="top:0px;left:0px;width:100px;height:100px;position:absolute;background:black;" onselectstart="return false;"
onmousedown="mousedown.apply(this,arguments);">
</div>
</body>
<script type="text/javascript">
/***********************************************************************
* 函数名：startdrag
* 说明：开始一段拖动行为，检查拖动行为的过程和终止并响应相应的事件。
* 参数：
* parent DOM对象，拖动所属的父对象，必需是容器，可以为document.body
* onmove 函数对象，事件，拖动开始后，鼠标移动触发事件
* onfinish 函数对象，事件，拖动结束时，触发事件一次
* area 对象，可以缺省，必须包含4个属性top left width height，以指定鼠标移动的有效范围，默认值为parent的全部范围。
***********************************************************************/
function startdrag(parent,onmove,onfinish,area)
{
var up,out,over;
var divarea=document.createElement("div");
if(!area)area={
"top":"0px",
"left":"0px",
"width":"100%",
"height":"100%"
}
divarea.style.position="absolute";
divarea.style.top=area.top;
divarea.style.left=area.left;
divarea.style.width=area.width;
divarea.style.height=area.height;
divarea.style.overflow="hidden";
divarea.style.zIndex="10000";
divarea.className="dragArea";
parent.appendChild(divarea);
if(divarea.attachEvent)
{
divarea.attachEvent("onmousemove",onmove)
document.attachEvent("onmouseup",up=function(){
divarea.detachEvent("onmousemove",onmove);
document.detachEvent("onmouseup",up);
divarea.detachEvent("onmouseout",out);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
});
divarea.attachEvent("onmouseout",out=function(){
divarea.detachEvent("onmousemove",onmove);
document.detachEvent("onmouseup",up);
divarea.detachEvent("onmouseout",out);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
});
}
else if(divarea.addEventListener)
{
divarea.addEventListener("mousemove",onmove,true);
document.addEventListener("mouseup",up=function(){
divarea.removeEventListener("mousemove",onmove,true);
document.removeEventListener("mouseup",up,true);
divarea.removeEventListener("mouseout",out,true);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
},true);
divarea.addEventListener("mouseout",out=function(){
//alert("out");
divarea.removeEventListener("mousemove",onmove,true);
document.removeEventListener("mouseup",up,true);
divarea.removeEventListener("mouseout",out,true);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
},true);
}
}
</script>
<script type="text/javascript">
function mousedown()
{
var e=arguments[0]||event;
var me=this;
var dy=e.clientY-parseInt(me.style.top);
var dx=e.clientX-parseInt(me.style.left);
startdrag(
document.body,
function(e){
e=e||event;
if(e.clientY-dy<0||e.clientY-dy>parseInt(document.body.clientHeight)-100)return;
if(e.clientX-dx<0||e.clientX-dx>parseInt(document.body.clientWidth)-100)return;
me.style.top=e.clientY-dy;
me.style.left=e.clientX-dx;
},
function(e){
}
);
}
</script>
原网址：http://www.aspxhome.com/download/javascript/20085/36734.htm
分享到：
相关推荐
JavaScript拖拽框架是一种用于创建交互式用户界面的技术，它允许用户通过鼠标或其他输入设备将元素在屏幕上自由移动，常用于构建可自定义的GUI组件、拖放功能等。本篇文章将详细探讨“简易而又灵活的Javascript拖拽...
在本文中，我们将深入探讨如何使用three.js库创建一个简单的拖拽生成场景的示例。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得容易。结合OrbitControls.js，我们可以实现对场景中的对象...
一、JavaScript拖拽特效 1. **事件监听**：JavaScript中的`addEventListener`方法用于监听拖动事件。我们需要监听`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标释放）事件，以实现拖拽功能。 ...
通过这个例子，开发者可以学习到如何实现JavaScript拖拽功能，以及如何与不同的数据存储机制集成，从而在实际项目中灵活应用。 总的来说，这个主题涵盖了JavaScript事件处理、DOM操作、数据序列化、Ajax通信以及...
**一、JavaScript拖拽功能实现** 1. **事件监听**：首先，我们需要在HTML中为要拖动的Div添加`draggable`属性，然后使用JavaScript监听`dragstart`、`drag`和`dragend`事件。这些事件分别在拖动开始、拖动过程中和...
学习这两个例子，我们可以理解JavaScript拖拽的基本原理，并对比不同实现方式的适用场景。纯JavaScript拖拽适合小型项目，追求轻量化；而基于jQuery UI的拖拽则适用于需要高级特性和跨平台兼容性的复杂应用。在实际...
JS拖拽是指通过JavaScript实现的页面元素拖放效果，它可以允许用户通过鼠标操作页面上的元素，将其从一处拖动到另一处。在.NET环境下，虽然主要涉及后台编程，但可以通过与前端JS的配合实现拖拽功能。 JavaScript中...
**JavaScript拖拽流程设计器** 在Web开发中，创建交互式用户界面是提升用户体验的重要手段，而流程设计器就是其中的一种。JavaScript作为最广泛使用的客户端脚本语言，为实现这样的功能提供了强大的支持。本文将...
在JavaScript和jQuery的世界里，实现图片拖放至指定位置的功能是一项常见的交互设计，它能够提升用户的体验，使得操作更加直观和便捷。以下我们将详细探讨如何使用这两种技术来完成这一任务。 首先，我们需要理解...
js拖动 拖拽div大小，内部随意文件操作。完美实现版
在JavaScript编程领域，实现"js拖拽保存效果"是一项常见的交互功能，主要涉及到HTML5的Drag and Drop API以及DOM操作。下面将详细讲解这个主题，包括拖拽的基本原理、实现步骤以及如何保存拖拽后的效果。 一、拖拽...
JavaScript（简称JS）拖拽功能是网页交互中的一个重要部分，它可以增强用户体验，使得用户可以通过鼠标操作页面元素，如图片、窗口或自定义对象等。在本"JS拖拽DEMO大全"中，我们将会探讨一系列关于JavaScript实现...
JavaScrpt 拖动层鼠标松开后自动排序
javascript js拖拽缩放 可以任意缩小放大
videojs视频可拖动播放与不可拖动播放
在JavaScript（JS）中实现拖拽功能是一项基本的交互设计技术，它允许用户通过鼠标或触摸设备移动页面上的元素。...记住，JavaScript拖拽功能的核心在于正确地处理鼠标或触摸事件，以及实时更新元素的位置。
《jQuery.easyDrag.js：探索史上最强大的拖拽插件》 在Web开发中，交互性和用户体验是至关重要的元素，而拖放功能（Drag and Drop）无疑是提升用户体验的有效手段之一。jQuery库以其简洁的API和丰富的插件生态，为...
在JavaScript（JS）中，实现拖放功能可以增强用户的交互体验，特别是在网页设计和开发中。这个功能允许用户通过鼠标操作将元素从一个容器移动到另一个容器，同时在原容器中删除该元素。本篇文章将深入探讨如何使用...
在JavaScript（js）中，实现拖动排序功能可以极大地提升用户体验，尤其是在管理列表或需要用户交互的场景下。本文将详细讲解如何实现js拖动排序，包括文本拖动、图片拖动，以及如何确保功能在移动端和不同浏览器的...
【标题】"js拖拽模块"涉及的核心技术是JavaScript（简称JS）的事件处理和DOM操作，用于实现网页上的元素可拖动并调整布局。在类似igoogle的个性化首页中，用户可以根据自己的需求自由地组织和排列页面上的各种小工具...