<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<base href="<%=basePath%>">
<title>。。。。</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
//开始拖动;
function startDrag(obj){
if(event.button==1){
obj.setCapture();
var win = obj.parentNode;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
}
//拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
}
}
//停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture();
moveable = false;
}
}
</script>
</head>
<body style="margin: 0px;padding: 0px;">
<div style="width: 100%;height: 50px;"><img src="images/title.jpg" style="width: 100%;height: 100%"/></div>
<div style="margin:auto;width: 100%;height:600px;background-image: url(images/gradient-bg.gif);background-repeat:repeat-y;text-align:center;">
<div style="margin:auto;" ><img src="<%=url %>" onmousedown="startDrag(this)" onmouseup="stopDrag(this)" onmousemove="drag(this)" style="width: 100%;height: 100%"/></div>
</div>
</body>
</html>
分享到：
相关推荐
在本文中，我们将深入探讨如何使用three.js库创建一个简单的拖拽生成场景的示例。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得容易。结合OrbitControls.js，我们可以实现对场景中的对象...
本篇文章将详细探讨“简易而又灵活的Javascript拖拽框架”，即Drag5。 首先，Drag5框架的核心特性在于其简单性和灵活性。简单性体现在它易于理解和使用，开发者无需深入理解复杂的底层实现，即可快速上手。灵活性则...
在本主题中，我们将深入探讨如何利用jQuery和JavaScript实现拖拽排序功能，适用于列表、菜单和表格等元素。 一、拖拽排序基础概念 拖拽排序是一种用户交互设计，允许用户通过鼠标拖动来改变元素的顺序。这种功能在...
jQuery.easyDrag.js插件的核心在于其简单易懂的API和高度定制化的特性。该插件允许用户轻松地将任何HTML元素转化为可拖动的对象，只需在目标元素上应用特定的jQuery选择器并调用easyDrag方法。例如： ```javascript...
本文将详细讲解如何使用纯JavaScript来实现一个简单的拖动功能，并通过实例代码进行解析。 首先，我们需要理解拖动的基本原理。拖动操作涉及到鼠标事件（如`mousedown`、`mousemove`和`mouseup`）以及元素的位置...
在JavaScript（JS）中，实现拖放功能可以增强用户的交互体验，特别是在网页设计和开发中。这个功能允许用户通过鼠标操作将元素从一个容器移动到另一个容器，同时在原容器中删除该元素。本篇文章将深入探讨如何使用...
本文详细介绍了使用JavaScript实现简单拖拽效果的完整过程，包括关键的DOM事件和逻辑处理，适合对前端开发感兴趣的读者学习和参考。 在实现拖拽功能时，通常涉及三个关键的鼠标事件：`mousedown`、`mousemove`和`...
一个简单的悬浮球可以由一个`<div>`元素来表示，我们可以通过CSS设置其样式，使其看起来像一个球体： ```html 悬浮球 ``` 接下来，我们需要编写CSS来定义悬浮球的样式，例如圆角、颜色和位置： ```css .ball { ...
"js制作简单拖拽效果.zip"这个压缩包文件包含了一个实现基本拖拽功能的示例，适用于网页开发中的各种场景，如布局调整、图片拖放等。下面我们将深入探讨JavaScript实现拖拽效果的关键知识点。 首先，我们需要理解...
"svg.draggy.js" 是一个专门针对SVG元素设计的JavaScript工具库插件，它的主要目标是提供简单易用的方法来实现SVG图形的拖拽功能。这个插件的核心特性包括： 1. **拖拽互动**：svg.draggy.js使得SVG元素具备拖动...
javaScript实现DIV简单拖拽
一个关于javascript的拖拽的例子，很简单，新手学习用。
在JavaScript编程领域，实现"js拖拽保存效果"是一项常见的交互功能，主要涉及到HTML5的Drag and Drop API以及DOM操作。下面将详细讲解这个主题，包括拖拽的基本原理、实现步骤以及如何保存拖拽后的效果。 一、拖拽...
下面是一个简单的拖拽实现过程： 1. **选择目标元素**：在HTML中，我们需要一个可以被拖动的元素，例如一个div。例如： ```html ; height: 100px; background-color: blue;"> ``` 2. **添加事件监听器**：在...
本文将详细探讨两个JS拖拽的例子，分析它们的优缺点，供学习者参考。 第一个例子是“拖拽div”。在这个示例中，开发者可能使用纯JavaScript实现了一个可拖动的div元素。基本思路通常是监听鼠标事件，如`mousedown`...
这里使用了一个简单的逻辑来判断鼠标是否处于有效拖拽区域内，以确保进度条的状态不会因为超出范围的拖拽动作而发生错误的变化。 #### 总结 本文通过一个具体的示例介绍了如何使用JavaScript结合HTML5的Canvas API...
这个“简单的JS拖拽功能”示例可能包含了一个基础的拖放实现，专注于核心逻辑，而不涉及复杂的页面渲染。下面我们将深入探讨JS拖拽功能的实现原理和相关知识点。 首先，我们需要理解拖拽过程的几个关键步骤： 1. *...
项目开发中需要用到一个拖动交换表格的功能，上网搜到雅虎的一个控件，结果简单的一个拖动交换行，就要引入七八个js library，太麻烦了。就自己综合网上资源写了一个可兼容IE，firefox，Chrome，Safari和Opera等主流...
本文将深入探讨如何使用JS实现网页中的拖拽效果，即允许用户通过鼠标操作将一个图片元素拖动到指定区域，并在释放时改变背景。这个功能在很多应用场景中都非常实用，比如拖放式界面设计、游戏开发、自定义布局等。 ...
《jQuery拖动拖拽插件draggabilly.pkgd.js详解》 在现代网页开发中，用户交互体验的提升已经成为了一项重要的设计考量。其中，拖放（Drag and Drop）功能作为增强用户交互的一种手段，被广泛应用在各种场景，如文件...