<!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="Content-Type" content="text/html; charset=gb2312" />
<title>简易拖放效果</title>
</head>
<body>
<script>
var isIE = (document.all) ? true : false;
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
}
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
var BindAsEventListener = function(object, fun) {
return function(event) {
return fun.call(object, (event || window.event));
}
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};
//拖放程序
var SimpleDrag = Class.create();
SimpleDrag.prototype = {
//拖放对象,触发对象
initialize: function(drag) {
this.Drag = $(drag);
this._x = this._y = 0;
this._fM = BindAsEventListener(this, this.Move);
this._fS = Bind(this, this.Stop);
this.Drag.style.position = "absolute";
addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));
},
//准备拖动
Start: function(oEvent) {
this._x = oEvent.clientX - this.Drag.offsetLeft;
this._y = oEvent.clientY - this.Drag.offsetTop;
addEventHandler(document, "mousemove", this._fM);
addEventHandler(document, "mouseup", this._fS);
},
//拖动
Move: function(oEvent) {
this.Drag.style.left = oEvent.clientX - this._x + "px";
this.Drag.style.top = oEvent.clientY - this._y + "px";
},
//停止拖动
Stop: function() {
removeEventHandler(document, "mousemove", this._fM);
removeEventHandler(document, "mouseup", this._fS);
}
};
</script>
<div id="idDrag" style="border:5px solid #0000FF; background:#C4E3FD; width:50px; height:50px;"></div>
<script>
new SimpleDrag("idDrag");
</script>
</body>
</html>
转载 原文出自：
http://www.cnblogs.com/cloudgamer/archive/2008/11/17/1334778.html
分享到：
相关推荐
javaScript实现DIV简单拖拽
JavaScript 实现简单的拖拽效果是网页交互中常见的一种功能，主要通过监听鼠标事件来实现。在本实例中，我们将分析如何使用 JavaScript 和 CSS 创建一个可拖动的蓝色盒子。 首先，我们需要创建 HTML 结构，这里包含...
JavaScript 实现简单的拖拽效果是前端开发中常见的一种交互功能，它可以增强用户的体验，使得用户可以自由地在页面上移动某个元素。以下是如何使用 JavaScript 实现这一效果的详细步骤： 首先，我们需要设置页面的...
以上就是使用JavaScript实现图片拖拽的基本步骤和关键代码。通过这种方式，我们可以为用户提供更直观、更具互动性的网页体验。在实际项目中，还可以根据需求进行扩展，例如添加图片缩放、旋转等更多功能。
总的来说，JavaScript实现网页元素拖拽排序涉及HTML的`<draggable>`属性、JavaScript的事件监听和DOM操作。通过这些技术，我们可以创建出交互性强、用户体验佳的拖拽排序功能，适用于各种列表、网格等布局的网页元素...
在这个“javascript 实现的层拖动简单实例”中，我们将探讨如何利用JavaScript来让一个div元素（通常被称为浮动层或浮窗）具有拖动能力。 首先，我们要理解`div`在HTML中的角色。`div`是一个块级元素，它允许开发者...
本篇文章将详细探讨“简易而又灵活的Javascript拖拽框架”，即Drag5。 首先，Drag5框架的核心特性在于其简单性和灵活性。简单性体现在它易于理解和使用，开发者无需深入理解复杂的底层实现，即可快速上手。灵活性则...
本文详细介绍了使用JavaScript实现简单拖拽效果的完整过程，包括关键的DOM事件和逻辑处理，适合对前端开发感兴趣的读者学习和参考。 在实现拖拽功能时，通常涉及三个关键的鼠标事件：`mousedown`、`mousemove`和`...
JavaScript是一种广泛应用于网页和网络...总的来说，实现可拖动的浮动窗口涉及到JavaScript事件处理、DOM操作和简单的数学计算。通过学习和理解这个过程，开发者可以创建出更多互动性的网页元素，提升用户的交互体验。
### JavaScript 实现圆形进度条拖拽滑动 #### 技术背景 在现代网页开发中，动态元素和交互式设计是提升用户体验的关键因素之一。其中，进度条是一种常见的UI组件，用于显示操作或任务的完成程度。传统的线性进度条...
"jquery实现简单图片的拖动"这个主题是关于如何利用jQuery的API来实现图片元素的拖放功能，这是一个常见的交互设计，使得用户可以通过鼠标拖动图片在页面上自由移动。 在jQuery中，实现图片拖动主要涉及到`...
本文将深入讲解如何利用JavaScript实现这样的功能。 首先，我们需要创建HTML结构，用于显示悬浮球。一个简单的悬浮球可以由一个`<div>`元素来表示，我们可以通过CSS设置其样式，使其看起来像一个球体： ```html ...
下面是一个简单的拖拽实现过程： 1. **选择目标元素**：在HTML中，我们需要一个可以被拖动的元素，例如一个div。例如： ```html ; height: 100px; background-color: blue;"> ``` 2. **添加事件监听器**：在...
本文将深入探讨如何使用jQuery实现简单的拖拽效果，让你的网页元素能够随心所欲地移动。 首先，拖拽效果的核心在于捕获鼠标事件，包括`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标释放）。...
这个实例展示了如何通过JavaScript来创建一个简单的拖动元素的功能，让用户可以自由地在页面上移动指定的元素。以下是对这个实例的详细解析： 首先，我们需要一个HTML结构，包含一个可以被拖动的元素。在这个例子中...
本文主要研究了使用JavaScript实现页面元素的拖拽功能，通过自定义模板和标记的方式来实现界面和代码的分离。下面是本文的详细知识点： 1. 自定义模板的概念：自定义模板是指在页面中预先定义的一些占位符，以便在...
然而，SVG元素默认并不支持拖放功能，这就需要借助于JavaScript库来实现。 "svg.draggy.js" 是一个专为SVG元素设计的JavaScript库，它的主要目标是添加拖拽交互到SVG图形上。这个库提供了一个简单易用的API，使得...
JavaScript实现的简单拖拽效果涉及了...通过以上的知识点介绍，我们可以看到JavaScript实现简单拖拽效果的原理和细节，以及如何在实际开发中应用这些技术。掌握这些知识，对于前端开发者来说是非常重要的基础技能。
在JavaScript中实现完美的拖拽效果是一项常见的交互设计任务，尤其在开发网页相册或可操作的用户界面时。通过理解和应用基本的DOM操作、事件处理以及位置计算，我们可以创建一个平滑且功能丰富的拖放体验。下面将...
综上所述，"table实现列宽的拖动效果"涉及到前端开发中的多个技术点，包括HTML表格、JavaScript事件处理、DOM操作、CSS样式设计、响应式布局、性能优化以及用户交互设计等。通过学习和实践这些知识，开发者可以提升...