1 封装变化
实现div拖动效果，在设置和取left和top值时,各种浏览器的js实现不同,把变化封装到接口 MyAPI 的三个方法:getTop(), getLeft(), moveTo()中, 在对各种浏览器写具体实现类,如下图
UML图:
在Javascript中 用 MyAPI 对IEAPI 和 W3CAPI 和聚合关系("has-a") 摸似了继承关系，代码如下（myapi.js）:
//Interface
function MyAPI()
{
this.Type = {// mark web browser ---------- learn from prototype framework
IE: !!(window.attachEvent && !window.opera),
Opera: !!window.opera,
WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
Gecko: navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
}
this.api = this.getInstance();
return this;
}
//IE implementation
function IEAPI()
{
return this;
}
//W3C implementataion
function W3CAPI()
{
return this;
}
//factory method
MyAPI.prototype.getInstance=function()
{
if(this.Type.IE)
return new IEAPI();
else
return new W3CAPI();
};
//method moveTo detail implementation
MyAPI.prototype.moveTo=function(obj,iX,iY)
{
this.api.moveTo(obj,iX,iY);
}
IEAPI.prototype.moveTo=function(obj,iX,iY)
{
if(iX!=null) obj.style.pixelLeft=iX;
if(iY!=null) obj.style.pixelTop=iY;
}
W3CAPI.prototype.moveTo=function(obj,iX,iY)
{
if(iX!=null) obj.style.left=iX+"px";
if(iY!=null) obj.style.top=iY+"px";
}
//method getLeft detail implementation
MyAPI.prototype.getLeft=function(obj)
{
return this.api.getLeft(obj);
}
IEAPI.prototype.getLeft=function(obj)
{
return obj.style.pixelLeft;
}
W3CAPI.prototype.getLeft=function(obj)
{
return parseInt(obj.style.left);
}
//method getTop detail implementation
MyAPI.prototype.getTop=function(obj)
{
return this.api.getTop(obj);
}
IEAPI.prototype.getTop=function(obj)
{
return obj.style.pixelTop;
}
W3CAPI.prototype.getTop=function(obj)
{
return parseInt(obj.style.top);
}
2 用写好的API实现对Div的简单拖动效果
代码如下:(demo.html)
<!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=iso-8859-1" />
<title>move demo</title>
<script src="myapi.js" type="text/javascript"></script>
<script language="javascript">
var myAPI = new MyAPI();
var moveable = false;
var xOff = 0;
var yOff = 0;
function start(obj,e){
moveable = true;
xOff = myAPI.getLeft(obj) - e.clientX;
yOff = myAPI.getTop(obj) - e.clientY;
}
function move(obj,e){
if(moveable){
myAPI.moveTo(obj, xOff + e.clientX, yOff + e.clientY)
}
}
function end(){
moveable = false;
}
</script>
</head>
<body>
<div style="width:200px; height:200px; top:200px; left:200px; position:absolute; background:#CC99CC" onmousedown="start(this,event)" onmousemove="move(this,event)" onmouseup="end()"></div>
</body>
</html>
是简单拖动,只在IE6和FireFox2下测过,也没有对所有浏览器封装，还有一些bug 比如鼠标移动太快,拖出div 后，因为mouseup事件触发不了而出来div粘上鼠标情况,在 div 上加个mouseout="end()"更好些
(祝中国2008奥运会成功)
分享到：
相关推荐
在Vue.js中实现页面div元素的拖拽排序功能可以极大地提升用户体验，特别是在构建可自定义布局的应用时。这里我们探讨的是一种基于CSS3 `transition-group` 的方法，它允许我们优雅地实现拖放动画和排序。 首先，让...
总结来说，这个JavaScript拖曳互换div位置的实现利用了DOM拖放API，通过监听拖放相关的事件，并通过精心设计的DOM操作来实现元素位置的交换，为用户提供了一种直观的交互方式，常用于GIS中的图层切换顺序控制或其他...
在Vue.js应用中，实现`el-table`组件的拖拽排序功能可以借助第三方库`sortablejs`。`sortablejs`是一个轻量级的JavaScript库，它允许用户通过鼠标或触摸事件对HTML元素进行拖放排序。以下是使用`sortablejs`在Vue中...
JavaScript 实现简单的拖拽效果是网页交互中常见的一种功能，主要通过监听鼠标事件来实现。在本实例中，我们将分析如何使用 JavaScript 和 CSS 创建一个可拖动的蓝色盒子。 首先，我们需要创建 HTML 结构，这里包含...
JavaScript实现登录滑块验证 本文实例为大家分享了JavaScript实现登录滑块验证的具体代码，供大家参考，具体内容...拖拽验证</p> <div id="left-select"></div> <div id="right-select"> <i id="icon-dui" clas
在Vue.js中实现一个具有放大、缩小和拖拽功能的弹框，主要涉及到自定义指令（Directives）的使用和事件监听。以下是如何利用JavaScript和Vue.js实现这一功能的详细步骤： 1. 首先，在`utils`文件夹下创建一个新的`...
JavaScript 实现简单的拖拽效果是前端开发中常见的一种交互功能，它可以增强用户的体验，使得用户可以自由地在页面上移动某个元素。以下是如何使用 JavaScript 实现这一效果的详细步骤： 首先，我们需要设置页面的...
在JavaScript编程中，实现登录框拖拽效果是一个常见的交互功能，尤其在网页设计中非常有用。这个效果使得用户可以通过鼠标在指定区域内拖动登录框，从而改变其在屏幕上的位置。下面我们将详细讨论如何实现这样的功能...
### JavaScript 实现进度条知识点详解 #### 一、概述 在网页开发中，进度条是一种常用的用户界面元素，用于直观地展示任务完成的程度。本文档详细介绍了一种利用原生JavaScript来实现进度条的方法，该方法不需要...
### JavaScript 实现简单图片拖拽效果 #### 一、引言 在Web开发中，交互式体验对于提升用户界面友好度至关重要。其中一项常见的交互功能就是拖拽效果，特别是图片的拖拽。本文将深入探讨如何使用原生JavaScript来...
### JavaScript 实现拖拽位置预览技术解析 #### 技术背景 在现代Web开发中，用户交互体验是提升网站吸引力的重要因素之一。其中，拖拽功能作为一种直观且高效的交互方式，被广泛应用于各种场景中，如文件管理、布局...
- 在使用拖拽API时，通常需要阻止默认的浏览器行为，例如打开新窗口预览文件。可以使用`event.preventDefault()`来实现这一目的。 3. **Vue3组件**： - 在Vue3中，我们可以创建一个名为`Upload`的组件来实现拖拽...
本文实例为大家分享了vue实现拖拽进度条的具体代码，供大家参考，具体内容如下 组件代码： <template> <div> <div class="slider" ref="slider"> <div class="process" :style="{ width }"></div> <div ...
在JavaScript编程中，有时我们需要对网页的滚动条进行自定义，以便更好地适应特定的设计需求或增强用户体验。在上述文档中，我们看到一个名为`scrollbar.js`的React组件，它展示了如何利用JavaScript来实现自定义...
接下来，我们可以使用 `vue-cropper` 组件来实现拖动截图的功能。在模板中，创建一个包含 `vueCropper` 的组件，设置必要的属性以自定义截图行为： ```html <div class="pop_alert" v-if="show"> @mouseenter....
假设我们有一个可拖动的层，我们需要获取其最终的样式以便实现拖拽功能。 **使用 `CurrentStyle` 对象**： ```javascript var div = document.getElementById("draggableDiv"); var currentStyle = null; if (div....
- 实现玩家拖动石头、剪刀或布到猜拳区的功能。 5. **显示结果**： - 根据玩家与电脑的出拳结果更新结果显示区的内容。 - 使用`document.querySelector`方法获取DOM元素。 - 利用条件判断语句实现逻辑判断。 6. ...
在实现拖拽功能时，通常会涉及到一个可拖动的元素，比如图片容器。这个元素需要具有特定的CSS样式，例如`position: absolute`，以便它可以相对于其父元素自由移动。同时，我们需要监听鼠标事件，如`mousedown`...
### JavaScript源代码：Element表格行列拖拽的实现 #### 概述 在使用Element UI进行前端开发时，可能会遇到需要实现表格数据拖拽排序的需求。然而，Element UI本身并未提供直接支持这一功能的组件或方法。为了实现...