submaze
- 浏览: 118315 次
- 性别:
- 来自: 深圳
-
文章分类
代码效果-鼠标点击DIV，可以任意拖拽DIV
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>drag</title>
<script src="../../../tomcat7/webapps/html/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$("#move").mousedown(function(e){
drag(document.getElementById("move"),e)
});
});
function drag(elementToDrag, event) {
var startX = event.clientX,
startY = event.clientY;
var origX = elementToDrag.offsetLeft,
origY = elementToDrag.offsetTop;
var deltaX = startX - origX,
deltaY = startY - origY;
if (document.addEventListener) {
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
} else {
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove", moveHandler);
elementToDrag.attachEvent("onmouseup", upHandler);
elementToDrag.attachEvent("onlosecapture", upHandler);
}
if (event.stopPropagation)
event.stopPropagation();
else
event.cancelBubble = true;
if (event.preventDefault)
event.preventDefault();
else
event.returnValue = false;
//鼠标移动时触发此函数
function moveHandler(e) {
if (!e)
e = window.event;
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
elementToDrag.style.zIndex = "10";
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
//鼠标Up时触发
function upHandler(e) {
//alert("up");
if (!e)
e = window.event;
elementToDrag.style.zIndex = "1";
if (document.removeEventListener) {
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
} else {
elementToDrag.detachEvent("onlosecapture", upHandler);
elementToDrag.detachEvent("onmouseup", upHandler);
elementToDrag.detachEvent("onmousemove", moveHandler);
elementToDrag.releaseCapture();
}
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
}
</script>
</head>
<body>
<div id="move" style=" position:absolute; z-index:100px; background:#F96; height:200px; width:200px;">drag</div>
</body>
</html>
分享到：
发表评论
-
CSS雪碧图demo（含雪碧代码）
2016-06-12 21:09 759css雪碧图demo效果图，含hover，代码附件下载sp ... -
easyui subgrid 多层子表格参考
2015-08-11 14:25 847参考回帖代码 http://bbs.csdn.net/topi ... -
css控制文本自动换行
2015-03-20 14:34 600http://wenku.baidu.com/link?ur ... -
js表单提交
2014-05-09 17:07 633js 表单提交 <html> <he ... -
滚动条样式
2014-05-06 20:53 321参考资料： http://manos.malihu.gr/t ... -
原生JavaScript技巧大收集100（上）
2013-12-30 19:53 422原生JavaScript技巧大收集，JavaScipt初学的各 ... -
编写jquery插件中的闭包demo
2013-12-18 16:43 2349demo中的代码，需要jquery库文件支持 //闭包特性 ... -
怎样让一个div高度自适应浏览器
2013-12-18 09:33 549网页中需要同时设置如下代码 html,body{heigh ... -
jquery框架学习
2013-12-10 09:27 394http://developer.51cto.com/art/ ... -
用JS的eval解析JSON中的注意点
2013-07-18 22:43 989eval 方法 将其中的参数 ... -
鼠标hover悬停事件
2013-07-16 16:50 849<title>鼠标hover悬停事件< ... -
html滚动条CSS样式
2013-07-16 16:19 873DEMO: body{ SCROLLBAR-FACE ... -
json数据结构
2013-06-06 16:42 598<script> //=====1===== ... -
JS函数-接收任意个参数
2013-06-06 09:28 2268<script> //可以接收任意多个参数 ... -
EXTJS3.0中文帮助文档
2013-06-05 19:38 827EXTJS中文帮助文档下载 -
EXTJS2.0表格中文排序
2013-06-05 14:42 979//引入必要的EXT开发环境 <link rel ... -
EXTJS3.0 IE9兼容性解决方案--IE兼容性解决方案
2013-05-24 14:57 1527我们的一个项目是用ExtJS做的，但在IE9下几乎完全不能用。 ... -
UI讨论
2013-05-22 15:27 7631.公司如果要研发自己的UI框架，JQuery和EXT该如何选 ... -
Extjs组件render说明与Demo
2013-05-02 16:05 16991.调用组件的render方法 panel.render ... -
select 取值 jquery
2013-04-12 22:19 735<select id="country& ...
相关推荐
本文将详细解析如何使用JavaScript来模仿百度的弹出登录框，并实现鼠标拖拽效果。 首先，创建弹出登录框的核心是利用HTML来构建登录表单结构，包括用户名输入框、密码输入框、登录按钮以及可能的记住密码和注册链接...
总结，实现jQuery UI拖拽效果的关键在于正确配置`draggable`和`droppable`组件，并确保HTML结构支持拖放行为。通过结合JavaScript和CSS，我们可以创建出直观且易于使用的用户界面，让用户能够方便地将div中的数据...
本实例将介绍如何使用PHP、MySQL和JavaScript实现一个拖拽Div的动态效果，并将其数据保存到数据库中，便于后续处理和展示。 **一、JavaScript拖拽功能实现** 1. **事件监听**：首先，我们需要在HTML中为要拖动的...
本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI，实现了一个用户界面元素（如div）可以被拖动的功能，从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解： 1. **jQuery基础**：jQuery...
在JavaScript编程中，"js 鼠标位置 div拖拽"是一个常见的交互功能，它允许用户通过鼠标操作页面上的div元素并改变其位置。这个功能的实现涉及到几个关键知识点，包括鼠标事件、鼠标的坐标属性以及div元素的样式操作...
《jQuery实现Div层排序的八种拖拽效果详解》 在网页开发中，动态交互功能是提升用户体验的重要手段，而Div层的拖拽排序就是其中之一。jQuery作为一个强大的JavaScript库，提供了丰富的API和插件，使得实现Div拖拽...
在JavaScript和jQuery的世界里，实现批量拖拽div是一项常见的交互设计任务，这主要涉及到DOM操作、事件监听以及坐标计算等多个知识点。在这个项目中，我们首先需要理解如何创建和添加div，然后实现批量选择功能，...
这段代码实现了简单的鼠标拖拽div左右滑动的效果，用户可以通过点击小div并在页面上移动鼠标来控制div在指定范围内滑动。通过这种方式，我们可以为用户提供更加直观和交互式的界面操作体验。 总结来说，这个例子...
本文将深入探讨如何使用JavaScript实现这个功能，让div元素可以在页面上自由移动，实现“js拖拽div随意摆放”。 首先，我们需要创建一个可拖动的div元素。在HTML中，我们可以这样定义： ```html <div id=...
通过 CSS 和 JavaScript 的结合使用，可以使 Div 元素在页面上自由移动，这种效果常用于弹出窗口、浮动广告等场景。 #### 实现方法 1. **CSS 定位**：使用 `position: absolute` 或 `position: fixed` 来定义 Div ...
本案例聚焦于"DIV+JS优化"，特别是实现"非常酷的拖拽翻页效果"，这是一种创新且吸引用户的网页浏览方式。下面我们将深入探讨这一技术实现的细节。 首先，`DIV`是HTML中的一个块级元素，常用于布局和样式控制。在...
本篇文章将详细探讨如何利用Div+CSS技术实现完美的层拖拽特效，这种特效常用于创建弹出层或可拖动的对话框，提升用户体验。 首先，要实现Div的拖拽功能，我们需要创建一个可拖动的Div元素，并为其添加CSS样式，使其...
总的来说，实现div拖拽效果的核心是监听鼠标事件，计算鼠标与div的相对位置，以及在鼠标移动时动态更新div的位置。这种技术常用于构建可拖动的窗口、图表、图片或其他需要用户交互的元素，提高了网页的用户体验。
源码使用DIV+SPAN+IMG图片标签实现页面基本布局...且使用原生js代码实现鼠标拖拽旋转效果，具体实现思路是监听鼠标的拖拽，然后改变立方体盒子容器的旋转值即可做到旋转功能。源码中有详细的注释说明适合初学者学习参考
在JavaScript编程中，实现“js鼠标拖拽图片切换预览特效”涉及到多个技术点和步骤。这个特效使得用户可以通过鼠标拖动来改变堆叠在一起的图片的显示顺序，从而预览不同的图片。以下是对这个特效的详细解释： 1. **...
- **动画效果**：利用 CSS 动画或 JavaScript 来增强拖拽过程中的视觉效果。 #### 五、总结 通过以上介绍，我们不仅学习了如何使用 JavaScript 实现 DIV 元素的拖拽功能，还了解了实现这一功能的基本原理和技术要点...
从提供的压缩包文件"100004 拖拽div"中，你可以找到更具体的实现代码，包括事件处理细节和可能的优化策略。通过研究和实践这段源码，你将能更好地理解和掌握HTML5拖放功能的运用，从而提升你的网页开发技能。
综上所述，这个JS拖拽DIV示例涉及到了JavaScript事件处理、DOM操作、CSS定位以及可能的服务器通信，这些都是前端开发者必备的技能。理解并掌握这些知识，对于创建交互式、响应式的Web应用至关重要。