`
rayln
  • 浏览: 433943 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

最简单的拖拽效果

 
阅读更多
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>
分享到：
| 斜坡算法
评论
发表评论

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

相关推荐

    jquery简单实现拖拽效果

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

    JavaScript简单拖拽效果（1）

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

    Android 自定义View简单拖拽效果

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

    非常简单的网页拖拽效果js代码

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

    使用 svg 实现拖拽效果

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

    js仿百度弹出登录框支持鼠标拖拽效果

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

    【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个不同的示例，展示了如何在网页表格中实现内容的拖放功能。这种功能可以让用户通过简单的鼠标操作，自由地将表格内的数据从一个单元格移动到...

Magicbox
Global site tag (gtag.js) - Google Analytics