【02】拖放的整个过程-魔芋
 
01，创建2个元素，一个为拖放元素dragEle，一个是存放的元素targetEle。添加一些样式。
 
<div class="dragEle">

	我是可拖放的魔芋

</div>

<div class="targetEle">

	put place

</div>
 
02，设置dragEle的属性draggable 属性为 true。使它可以拖动。
 
03，设置dragEle的dragstart事件。
 
<div class="dragEle" id="dragEle" draggable="true" ondragstart="dragstart(ev)">

	我是可拖放的魔芋

</div>

<div class="targetEle" id="targetEle">

	put place

</div>

<script>

	function dragstart(ev){

		ev.dataTransfer.effectAllowed='move';

		ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));

		ev.dataTransfer.setDragImage(ev.target,0,0);

		return true;

	}

</script>
 
 
PS：此时，dragEle可以拖动了。如下图：
 

 
04，设置目标元素可以接收拖动元素。
dragover 事件
如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
function dragOver(ev) {

	ev.preventDefault();

}
 
05，目标元素的drop事件，添加拖放元素到目标元素。
 
function dragDrop(ev) {

	var src = ev.dataTransfer.getData("Text");

	ev.target.appendChild(document.getElementById(src));

	ev.preventDefault();

	ev.stopPropagation();

}
 

 
完整代码如下：
<!DOCTYPE html>

<html lang="zh-cn">

<head>

	<meta charset="utf-8">

	<title>moyu's demo</title>

	<!-- 定义网页搜索引擎索引方式 -->

	<meta name="renderer" content="webkit">

	<!-- 360,以webkit内核进行渲染 -->

	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

	<!-- 以最新内核进行渲染。 -->

	<meta http-equiv="Cache-Control" content="no-siteapp"/>

	<!-- 百度禁止转码 -->

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>

		.dragEle {

			width: 100px;

			height: 100px;

			background: red;

		}

		.targetEle {

			width: 300px;

			height: 300px;

			background: yellow;

		}

	</style>

</head>

<body>

<div class="dragEle" id="dragEle" draggable="true" ondragstart="dragstart(event)">

	我是可拖放的魔芋

</div>

<div class="targetEle" id="targetEle" ondrop="dragDrop(event)" ondragover="dragOver(event)">

	put place

</div>

<script>

	function dragstart(ev) {

		ev.dataTransfer.effectAllowed = 'move';

		ev.dataTransfer.setData("Text", ev.target.id);

		var src = ev.dataTransfer.getData("Text");

	}

	function dragEnter(ev) {

	}

	function dragOver(ev) {

		ev.preventDefault();//或 return false;

	}

function dragDrop(ev) {

	var src = ev.dataTransfer.getData("Text");

	ev.target.appendChild(document.getElementById(src));

	ev.preventDefault();

	ev.stopPropagation();

}

</script>

</body>

</html>
 
 
 
 
 
 
 

**

【02】一个实现h5的拖放的整个过程-魔芋的更多相关文章

  1. 领导让我重新做一个微信H5页面！

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  2. 用vuex写了一个购物车H5页面的示例代码

    用vuex写了一个购物车H5页面的示例代码:https://www.jb51.net/article/152008.htm 通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是 ...

  3. h5 简单拖放

    最新的HTML5标准为所有的html元素规定了一个draggable属性,它表明了元素是否可以拖动,默认情况下,图像,链接,选中的文字是可以拖动的,因为他们的draggable属性被自动设置为true ...

  4. 自适应游标共享技术02(一个简单的例子来走近ACS)

    为了不让其他因素干扰实验,参数设置如下: optimizer_mode=ALL_ROWS(使用CBO) optimizer_features_enable=11.2.0.3(使用最新的优化参数) op ...

  5. Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明

    前言 上一篇文章我们搭建好了 Flutter 的开发环境. Flutter 即学即用--01 环境搭建 这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter. 开发系统:MAC ...

  6. H5 _拖放使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. h5的拖放（drag和drop）

    被拖曳元素发生的事件=== ondragstart:拖拽元素开始被拖拽的时候触发 ondragend:拖拽完成后触发 目标元素发生的事件=== ondragenter:拖曳元素进入目标元素的时候触发 ...

  8. YAML_14 tags给指定的任务定义一个调用标识,以后不用重复整个过程，只需要执行tags标签的部分

    ansible]# vim adhttp.yml --- - hosts: cache   remote_user: root   tasks:     - copy:         src: /r ...

  9. 一个简易h5涉及的ps技巧

    事实证明,很长时间不做,是会忘掉的呀,的呀,呀,啊~ 1.合并图层 CTRL+E合并多个图层 2.切片 3.导出 文件-------导出------存储为web所用格式-------->> ...

随机推荐

  1. 使用ansible对远程主机上的ssh公钥进行批量分发

    使用ansible对远程主机上的ssh公钥进行批量分发或者是删除修改操作 ansible内置了一个authorized_key模块,这个模块很好用,我们使用这个模块可以对远程 主机上的ssh公钥进行批 ...

  2. bzoj1854 [Scoi2010]游戏【构图 并查集】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1854 没想到怎么做真是不应该,看到每个武器都有两个属性,应该要想到连边构图的!太不应该了! ...

  3. Backbone.js入门教程第二版笔记（2）

    关于手动触发router,之前看到的例子都是通过在url后面加上#xxx或者点击一个a链接方法来触发, 还有一种情况是通过触发一种规则,来触发另一种规则(表述无能),比如这个例子中,我在url后面加上 ...

  4. HDU 2227 Find the nondecreasing subsequences dp思想 + 树状数组

    http://acm.hdu.edu.cn/showproblem.php?pid=2227 用dp[i]表示以第i个数为结尾的nondecreasing串有多少个. 那么对于每个a[i] 要去找 & ...

  5. Web版简易五子棋

    前些时候把大三写的C++版五子棋改成Web板挂到了网上,具有一定傻瓜式智能,欢迎体验使用拍砖:http://www.zhentiyuan.com/Games/QuickFiveChess.aspx 现 ...

  6. 关于setTimeout和Promise执行顺序问题

    先看一段代码 console.log('打印'+1); setTimeout(function(){ console.log('打印'+2); }) new Promise(function(reso ...

  7. java.lang.NoSuchMethodError: org.hibernate.cfg.Environment.verifyProperties

    我在使用jpa2+spring4+hibernate4 的时候,报错java.lang.NoSuchMethodError: org.hibernate.cfg.Environment.verifyP ...

  8. android 图片叠加效果——两种方法的简介与内容 ，带解决Immutable bitmap passed to Canvas constructor错误

    第一种是通过canvas画出来的效果: public void first(View v) { // 防止出现Immutable bitmap passed to Canvas constructor ...

  9. SEO 第三章

    SEO第三章 本次课目标: 1.  掌握关键词的选取方法 2.  掌握关键词的竞争强度分析 3.  掌握关键词的拓展方法 一.关键词的选取 选择关键词的时候可以根据公司网站的定位,围绕公司的主营产品或 ...

  10. Android（java）学习笔记159：多线程断点下载的原理（Android实现）

    之前在Android(java)学习笔记215中,我们从JavaSE的角度去实现了多线程断点下载,下面从Android角度实现这个断点下载: 1. 新建一个Android工程: (1)其中我们先实现布 ...