【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. scikit-learning教程（三）使用文本数据

    使用文本数据 本指南的目标是探讨scikit-learn 一个实际任务中的一些主要工具:分析二十个不同主题的文本文档(新闻组帖子)集合. 在本节中,我们将看到如何: 加载文件内容和类别 提取适用于机器 ...

  2. JavaScript--数组常用方法总结

    JavaScript--数组常用方法总结 测试模板: var arr = ["a", "b", "c", "d", &q ...

  3. tsconfig.json No inputs were found in config file

    Build:No inputs were found in config file '/tsconfig.json'. Specified 'include' paths were '["* ...

  4. hibernate Day1 案例代码

    1.创建Person类 package com.icss.pojo; public class Person { private int uid; private String uname; priv ...

  5. oracle 查看未关闭连接

    查看连接状态.问题电脑等信息: select sid,serial#,username,program,machine,status from  v$session; 2.查看sql; select ...

  6. servlet service的描述：

    链接:https://www.nowcoder.com/questionTerminal/3f368578e43d48b1968d79b935d00972来源:牛客网 1.     service方法 ...

  7. asp.net 微信登录实现方式

    之前我以为做微信登录跟微信公众号有关,后来发现是我想多了.原来微信还有一个叫开放平台的东西,见下图: 我的这个已经生成好了,没有的需要创建一个,https://open.weixin.qq.com/c ...

  8. 进程间通信的两种实现方式（IPC）

    进程间通信的两种实现方式(IPC) IPC: iter processing communicate 进程间通信:IPC(iter process communicate)linux free-m 可 ...

  9. expect下命令不能解析通配符*的问题

    曾遇到这样一段代码:(Bash脚本) 1 2 3 4 5 6 7 8 9 10 11 12 #!/usr/bin/expect -f set HOST "192.168.102.1" ...

  10. ios 设置head请求头，自定义head, read response header

    AFHTTPSessionManager *manger = [AFHTTPSessionManager manager]; manger.securityPolicy = [AFSecurityPo ...