【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. icomoon字体使用

    如何灵活利用免费开源图标字体-IcoMoon篇 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/w ...

  2. bzoj 5019 [Snoi2017]遗失的答案

    题面 https://www.lydsy.com/JudgeOnline/problem.php?id=5019 题解 如果L不是G的倍数 答案为0 下面考虑G|L的情况 将G,L质因数分解 设$L= ...

  3. Jury Meeting CodeForces - 854D

    Jury Meeting CodeForces - 854D 思路:暴力枚举会议开始的那一天(只需用所有向0点飞的航班的那一天+1去枚举即可),并计算所有人此情况下去0点和从0点出来的最小花费. 具体 ...

  4. 利用layui的load模块解决图片上传

    首先肯定要参考layui官网的upload模块文档:http://www.layui.com/doc/modules/upload.html 讲讲思路:在一份添加表单中,我们有个图片上传的模块,然后我 ...

  5. Invitation Cards POJ 1511 SPFA || dij + heap

    http://poj.org/problem?id=1511 求解从1去其他顶点的最短距离之和. 加上其他顶点到1的最短距离之和. 边是单向的. 第一种很容易,直接一个最短路, 然后第二个,需要把边反 ...

  6. 更新项目，uwsgi重新加载和日志文件

    uwsgi --reload /var/run/uwsgi.pid uwsgi.pid是uwsgi进程文件 /var/log/uwsgi.log

  7. [转]如何使用MFC和类型库创建自动化项目

    本文转自:http://www.cnblogs.com/zhoug2020/archive/2012/04/01/2429064.html 摘要 本文详细介绍了如何自动化像Microsoft Offi ...

  8. AJPFX关于集合的几种变量方式

    package com.java.test; import java.util.ArrayList;import java.util.Enumeration;import java.util.Iter ...

  9. UVa OJ 458

     The Decoder  Write a complete program that will correctly decode a set of characters into a valid m ...

  10. ARM 环境下使用azure powershell 从远程blob中拉去vhd 并创建虚拟机

    最近需要从指定公共访问的blob中复制vhd到自己的订阅存储账户,并使用vhd创建AZURE ARM虚拟机(非经典版),而且在portal.azure.cn中无法实现虚拟机映像创建等功能,于是自己使用 ...