<!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" lang="gb2312">
<head>
<title> 代码实例：拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content="代码实例：拖动对象">
<meta name="description" content="最简短的拖动对象代码实例演示">
<style>
.dragAble {position:relative;cursor:move;}
</style>
<script language="javascript">
<!--
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="dragAble") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function("isdrag=false");
//-->
</script>
</head>
<body>
<div style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class="dragAble">这些都是可拖动对象</div>
<br>
<div class="dragAble">我也可以动吗?</div>
</body>
</html>
from: http://blog.csdn.net/xyk0830/archive/2007/11/07/1871712.aspx
分享到：
相关推荐
HTML5实践Drag&Drop HTML5作为现代网页开发的标准，引入了许多新的特性和API，其中一项就是拖放（Drag&Drop）功能。这项技术允许用户通过鼠标或触控设备将元素从一个位置拖动到另一个位置，极大地提升了用户体验。...
标题“Drag & Drop Files to Delete.zip”提示我们这是一个与JavaScript相关的项目，可能涉及到文件操作，特别是拖放（Drag & Drop）功能，用于删除文件。在Web开发中，这种功能允许用户通过简单的拖放操作来处理...
本篇文章将深入探讨如何使用jQuery实现拖放(Drag and Drop)功能，特别是针对图片的拖放操作。拖放功能是网页交互中常见的一种增强用户体验的方式，常用于文件上传、页面元素排序等场景。 首先，我们需要引入jQuery...
在提供的压缩包文件"DW拖拽（drag drop）的例子"中，可能包含了一些实际的Dreamweaver项目文件，例如HTML文件、CSS文件、JavaScript文件等，这些文件可以用来学习和实践如何在Dreamweaver中实现拖拽功能。...
在JavaScript的世界里，MooTools是一个轻量级且强大的库，它提供了许多实用的功能，包括对DOM操作、事件处理、动画效果以及高级功能如拖放（Drag & Drop）。本篇文章将详细探讨如何利用MooTools 1.2.1版本实现拖拽...
在这个"DW拖拽（drag drop）的例子"中，我们可以深入学习拖放操作背后的编程逻辑。 在Web开发中，HTML5引入了对拖放功能的原生支持，这使得在浏览器环境中实现DW变得更加简单。通常，这涉及到使用`draggable`属性来...
今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子, 合上书本自己写一个简化版本的。大约20分钟完成， 没有考虑兼容firefox。整个代码封装成一个对象 也是借鉴书中的风格...
在这个特定的例子"drag-drop-folder-tree.zip_ajax_dhtmlxtree_dr_drop_tree_tree_ja"中，开发者利用JavaScript的特性实现了一个拖放功能，这在AJAX（Asynchronous JavaScript and XML）开发中非常常见。AJAX允许...
在网页开发中，实现“拖放”功能可以让...这个例子只是基础应用，实际项目中可能还需要考虑文件类型验证、错误处理、批量上传等问题。通过HTML、CSS和JavaScript的组合，你可以创建出更复杂、更个性化的拖放交互体验。
在这个例子中，`#container`是包含所有卡片的父元素，`.draggable-handle`是拖动触发器（例如，一个内部的`<div>`），`onEnd`回调函数会在每次拖放结束后执行，提供新的卡片顺序信息。 SortableJS还支持许多其他...
在这个例子中，我们将深入探讨拖拽功能的基本原理、实现方式以及它在不同应用场景中的价值。 1. 拖拽（Drag）的基本概念： 拖拽操作通常包括三个主要阶段：按下、拖动和释放。用户首先点击并保持鼠标按钮（或触摸...
您需要使用的唯一两件事是（如您所料）可和可要求支持Ember 2.18及更高版本（可能与较低版本兼容，但这已通过测试）安装ember install ember-drag-drop谢谢非常感谢 ，我如所承诺地从中偷偷偷了。用法原语例子移动...
5. **拖放功能**：通过HTML5的drag and drop API，可以实现元素的拖放操作，创建交互式界面。 6. **AJAX**：异步JavaScript和XML，用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。 7. **jQuery...
在IT行业中，交互设计是提升用户体验的关键因素之一，而拖放（Drag & Drop）功能则是交互设计中的一个重要组成部分。Google的新闻页面就以其简洁、易用的拖动特性著称，用户可以方便地通过拖动来调整新闻区块的位置...
在IT行业中，拖放（Drag & Drop）技术是一种常见的用户交互方式，允许用户通过鼠标或触摸设备直观地移动元素。本教程将详细讲解如何实现一个类似博客163模块的拖动效果，以及如何保存这种拖动状态。我们将主要关注...
先点击一个小例子：在用户开始拖动 <p> 元素时执行 JavaScript 拖动我! 提示： 链接和图片默认是可拖动的，不需要 draggable 属性。 定义和用法 在拖放的过程中会触发以下事件： 在拖动目标上触发事件 (源元素): ...
在JavaScript（JS）中，拖放（Drag and Drop）功能是一种常见的交互设计，它允许用户通过鼠标或触摸设备将元素从一个位置拖动到另一个位置。这个“JS 拖拽例子”是一个教学实例，旨在展示如何在网页上实现拖放操作。...
【上传文件的AJAX小例子】是一个通过HTML5新特性实现的文件上传示例，它结合了AJAX技术，提供了一种无需刷新页面即可完成文件上传的交互方式。在这个例子中，IBM展示了一种创新的文件上传解决方案，尤其是利用了...
### Dojo之路：如何利用Dojo实现Drag and Drop效果 #### 概述 随着Web开发技术的不断进步，用户界面的交互性和动态性也日益增强。Drag and Drop（拖放）作为一种直观的操作方式，在现代Web应用中变得越来越普遍。...