`
rayln
  • 浏览: 415020 次
  • 性别: 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>
分享到：
| 斜坡算法
评论
发表评论

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

相关推荐

    js最简单的拖拽效果实现代码

    本文讨论的重点不是iGoogle的拖放效果，那属于进阶篇，本文是拖拽的“第一阶”，如题，实现最简单的拖拽。 这里的“最简单”即不考虑多个拖拽层的堆叠顺序，不考虑拖拽范围限制，不考虑类似iGoogle的“dragTo”的...

    JavaScript简单拖拽效果（1）

    拖拽在前端开发中是很常见的功能，也是基本功之一，本文是不限制范围的拖拽也就是最简单的拖拽，鼠标按下对象，拖拽，松开停止！ 1，onmousedown事件 2，onmousemove事件 3，onmouseup事件 因为在按下时拖动，...

    最好最酷的可拖拽树形菜单

    用JAVASCRIPT实现的可拖拽的树形菜单。效果非常炫酷。使用简单。

    简单的jquery拖拽排序效果实现代码

    实现随鼠标移动的效果； 2.初始化一个元素及其坐标； 3.拖拽对象的最后坐标，与元素的坐标 进行计算和判断 来确定 要插入的目标元素； 4.用insertBefore 方法 插入到目标元素的前面 具体代码如下： 代码如下: &lt;!...

    微信小程序canvas拖拽、截图组件功能

    实现效果 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转，所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道手指在元素上、如果多个元素重叠如何知道哪个...

    javascript拖拽DIV技巧

    Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽

    Android自定义View实现拖拽效果

    腾讯QQ有那种红点拖动效果，今天就来实现一个简单的自定义View拖动效果，再回到原处，并非完全仿QQ红点拖动。 先来看一下效果图 简单说一下实现步骤 1.创建一个类继承View 2.绘制出一个小球 3.重写onTouchEvent,来...

    用photoshop制作图片卷页效果

    1.让我们从最简单的卷页效果开始。新建一个文档，320㗴20像素大小，分辨率为72，白色背景。选择矩形矢量形状工具，用新建工作路径的方式，绘制一个和页面差不多大小的矩形，和边缘留下一定空隙。(图01) 图01 ...

    JS拖拽插件实现步骤

    js拖拽是常见的网页效果，本文将从零开始实现一个简单的js插件。 一、js拖拽插件的原理 常见的拖拽操作是什么样的呢？整过过程大概有下面几个步骤： 　1、用鼠标点击被拖拽的元素 　2、按住鼠标不放，移动鼠标 　3...

    iOS实现简单抽屉效果

    所谓抽屉效果就是三个视图，向右拖拽显示左边的视图，向左拖拽显示右边的视图，当拖拽大于屏幕的一半时最上面的视图会自动定位到一边，当点击左边或右边视图时会最上面视图会自动复位。 效果如图：三个视图（左边：...

    react-sortable:使用react实现的简单的可拖拽排序的列表

    使用介绍版本历史m0: 最简单的警告提示m1: 实现列表功能m2: 实现选中功能

    UIPanGestureRecognizer 平滑手势例子

    UIPanGestureRecognizer 平滑手势例子 主要是对 图片 按钮 的拖拽效果，代码已经最简单化了，不超过10行 只有最简单的例子才是适合学习的

    怎么用javascript进行拖拽第1/2页

    Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽． 有很多理由让你的网站加入拖拽功能，最...

    WPF 在image控件用鼠标拖拽出矩形的实现方法

    今天有小伙伴问我一个问题，...最简单的方法是在 Down 的时候记录按下的点，在 移动的时候重新计算所在的宽度 先在界面使用一个图片和一个矩形 截图20180811150831.png&gt; 欢迎访问我博客 http://lindexi.oschina.io

    实现小程序canvas拖拽功能

    实现效果 (此图片来源于网络，如有侵权，请联系删除! )   如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转，所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道...

    PDF转换成WORD-pdftu

    PDFTU，PDF转换成WORD转换器：PDF由于其优异的跨平台特性以及显示效果成为最流行的电子文档格式之一，但也因为其无法编辑修改而令许多用户头疼。PDF转换成Word转换器完美地解决了这一难题，简单地拖拽操作就能将PDF...

    arcgis 拖拽 画圆 例子

    简单说明一下思路，当选择圆形时，通过dojo对map对象的onMouseDragStart，onMouseDrag，onMouseDragEnd事件进行相应的绑定，鼠标拖动时即时画出新的圆的同时，将上次所画的圆清掉，这样就有了圆随着鼠标拖动变化的...

    TextFieldEffects：受Codrops启发的自定义UITextFields效果，该效果是使用Swift构建的

    TextFieldEffects 我爱上了在文本输入效果。 作为练习，我决定使用Swift尽可能多地重现它们（其中一些具有...安装此框架的最简单方法是将TextFieldEffects/TextFieldEffects文件夹拖放到您的项目中。 这也可以防止中

    SVG实现拖动贝塞尔曲线做成了Photoshop钢笔工具效果

    ----------------- 转载注明出处, 环境是svg6.0插件 用最简单的做法实现看是很难的东西. 运行HTML即可 -----------------

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