最简单的拖拽效果 - Rayln - ITeye博客

`

rayln

浏览: 430344 次
性别:
来自: 上海

最近访客更多访客>>

jis117

fkshl

u011893509

huangliulove

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

IThead：纠结了几天，用了你的方法，现在解决了，谢谢！
Eclipse 写Javascript卡死问题
Rubicon__：你好，我在运用PageWidget这个类时，出现第一页翻到第二 ...
android翻书效果实现原理（贝塞尔曲线绘制原理/点坐标计算）
lionios：如果不显示printDialog，则打印出来的是空白页，请问你 ...
Print打印机例子
rayln： weiqiulai 写道哥们儿，我怎么没有看到监控队列的配置和 ...
JMS监听MQ实例
weiqiulai：哥们儿，我怎么没有看到监控队列的配置和代码？
JMS监听MQ实例

最简单的拖拽效果

博客分类：

Js&JQuery
Html5&Css3

阅读更多

html5中提供了drag的效果，通过事件可以进行拖拽元素，请看例子，非常简单！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="div1" style="background-color: red; width: 200px; height: 200px"></div>
<div id="div2" style="background-color: yellow; width: 100px; height: 100px; margin-top: 100px;" draggable="true"></div>
</body>
</html>
<script>
window.onload = function(){
	var div1 = document.getElementById("div1");
	var div2 = document.getElementById("div2");
	
	div1.ondragover = function(e){
		e.preventDefault();
	}
	div1.ondragenter = function(){
		
	}
	div2.ondragend = function(){
		
	}
}
</script>

分享到：

TabHost的基本使用方法 | 斜坡算法

2013-01-28 16:46
浏览 805
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

jquery简单实现拖拽效果: 本文将深入探讨如何使用jQuery实现简单的拖拽效果，让你的网页元素能够随心所欲地移动。首先，拖拽效果的核心在于捕获鼠标事件，包括`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标释放）。...

JavaScript简单拖拽效果（1）: 本文详细介绍了使用JavaScript实现简单拖拽效果的完整过程，包括关键的DOM事件和逻辑处理，适合对前端开发感兴趣的读者学习和参考。在实现拖拽功能时，通常涉及三个关键的鼠标事件：`mousedown`、`mousemove`和`...

Android 自定义View简单拖拽效果: 本教程将探讨如何创建一个简单的自定义View，实现类似于腾讯QQ中的红点拖动效果，但并不是完全复刻这一功能。我们将创建一个可拖动的点，当松开手指时，该点会自动返回到初始位置。首先，我们需要创建一个新的Java...

非常简单的网页拖拽效果js代码: 网页拖拽效果是Web开发中的一个常见功能，它允许用户...然而，实际应用中可能还需要考虑更多因素，例如边界限制（防止元素拖出视口）、元素大小调整、多触摸设备支持等，这些都是更完善的拖拽效果实现所要考虑的细节。

js仿百度弹出登录框支持鼠标拖拽效果: 总结起来，实现“js仿百度弹出登录框支持鼠标拖拽效果”主要涉及到JavaScript的DOM操作、事件监听、CSS样式控制以及简单的拖拽算法。通过结合HTML、CSS和JavaScript，我们可以创建出一个功能齐全、交互友好的弹出...

使用 svg 实现拖拽效果: 以下是一个简单的SVG拖拽效果的JavaScript实现： ```html const draggableRect = document.querySelector('#draggable'); let isDragging = false; let initialMouseX, initialMouseY; draggableRect...

【JavaScript源代码】JavaScript实现简单拖拽效果.docx: JavaScript 实现简单的拖拽效果是网页交互中常见的一种功能，主要通过监听鼠标事件来实现。在本实例中，我们将分析如何使用 JavaScript 和 CSS 创建一个可拖动的蓝色盒子。首先，我们需要创建 HTML 结构，这里包含...

Jquery拖拽Div层排序8中拖拽效果: 基础拖拽效果是最常见的，通过绑定`mousedown`、`mousemove`和`mouseup`事件，实现元素跟随鼠标移动的效果。在jQuery中，可以使用`.draggable()`方法创建可拖动的Div元素。结合CSS定位，可以让Div在页面上自由移动。...

js最简单的拖拽效果实现代码: 本文将探讨如何实现最简单的拖拽效果，适用于初学者理解和应用。首先，我们需要了解拖拽涉及到的主要鼠标事件：`onmousedown`、`onmouseup` 和 `onmousemove`。当用户按下鼠标按钮（`onmousedown`）时，拖拽开始；...

最简单的微信小程序拖拽排序列表.zip: 本文将详细介绍如何利用微信小程序的特性，结合JavaScript技术，创建一个简单易用的拖拽排序列表。首先，我们需要了解微信小程序的基本结构。微信小程序由页面（Page）组成，每个页面包含WXML（结构层）、WXSS...

使用js实现的简单拖拽效果: 本文将介绍如何使用纯JavaScript实现一个简单的拖拽效果，同时提供面向对象的方法来封装拖拽逻辑。首先，实现一个基本的拖拽效果需要HTML、CSS和JavaScript三部分的配合。在HTML结构中，我们需要一个可拖拽的元素...

three.js拖拽生成场景简单示例: 在本文中，我们将深入探讨如何使用three.js库创建一个简单的拖拽生成场景的示例。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得容易。结合OrbitControls.js，我们可以实现对场景中的对象...

网页拖拽效果: 网页拖拽效果是一种常见的交互设计技术，它使得用户可以通过鼠标或其他输入设备，将网页上的元素在页面上自由移动，类似于Google iGoogle个性化主页中的小工具布局功能。这种效果提升了用户体验，让用户可以按照自己...

制作拖拽效果: 本教程将详细介绍如何使用Adobe Dreamweaver的Behaviors功能来创建一个简单的拖拽购物箱效果。首先，我们需要准备必要的素材。这包括一个代表购物箱的大图像以及若干代表待购商品的小图像，例如手机、游戏手柄和...

图片拖拽效果: 总的来说，这个"图片拖拽效果"展示了如何使用jQuery创建一个简单的交互式网页元素。通过理解并运用这些基本原理，开发者可以扩展这个功能，使其适应更复杂的场景，比如限制图片拖动范围、实现多图拖拽或者添加拖放...

JS实现的表单简单拖拽特效源码.zip: 在实际应用中，开发者可以根据项目需求进行相应的定制，比如添加动画效果，优化性能，或者实现更复杂的拖放逻辑，如拖放到特定区域执行特定操作。总的来说，掌握JavaScript拖拽效果的实现对于前端开发者来说是必备...

Vue实现简单的拖拽效果: 在Vue.js中，实现简单的拖拽效果主要依赖于自定义指令（Custom Directive）以及JavaScript的事件监听机制。本文将深入探讨如何使用Vue自定义指令来创建一个基础的拖拽功能，包括理解指令修饰符（Modifiers）、事件...

js表格内容拖拽效果.zip: "js表格内容拖拽效果.zip"这个资源提供了一种创新的解决方案，它包含了10个不同的示例，展示了如何在网页表格中实现内容的拖放功能。这种功能可以让用户通过简单的鼠标操作，自由地将表格内的数据从一个单元格移动到...

Global site tag (gtag.js) - Google Analytics