【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. Hdu 3966 Aragorn's Story (树链剖分 + 线段树区间更新)

    题目链接: Hdu 3966 Aragorn's Story 题目描述: 给出一个树,每个节点都有一个权值,有三种操作: 1:( I, i, j, x ) 从i到j的路径上经过的节点全部都加上x: 2 ...

  2. Win10 Hyper-v 中安装 CentOS 搭建开发环境

    Windows 环境 操作系统:Windows 10 开发环境:VS2005(需启动.NET Framework 3.5 ,才能正常安装使用)  Linux 环境 发行版:CentOS 7_x64 安 ...

  3. SpringCloud开发学习总结（七）—— 声明式服务调用Feign（二）

    参数绑定 在上一章的示例中,我们使用Spring Cloud Feign实现的是一个不带参数的REST服务绑定.然而现实系统中的各种业务接口要比它复杂得多,我们有时会在HTTP的各个位置传入各种不同类 ...

  4. selenium2+python自动化2-元素定位

    嘻嘻,书接上回,接着唠,这里先补充一下自动化要掌握的四个步骤吧:获取元素.操作元素.获取返回值.断言(返回结果与期望结果是否一致),最后就是自动化测试报告的生成.这一片主要讲一下如何进行元素定位.元素 ...

  5. 今天发现一个汉字转换成拼音的模块，记录一下，直接pip install xpinyin即可

    http://blog.csdn.net/qq_33232071/article/details/50915760

  6. ImageView加载长图（适用不需要缩放的情况）

    此案例适用于加载网络长图且图片的宽和高已知的情况.由于ImageView加载图片有一个4096*4096的限制,所以对于巨长图的加载比较麻烦,需要我们自己去手动处理. 有两种解决方案:第一种就是比较l ...

  7. Apache Kylin的架构特性

    不多说,直接上干货! http://kylin.apache.org/cn/ 可扩展的超快OLAP引擎,提供标准SQL查询接口 支持单机或集群部署,为减少在Hadoop上百亿规模数据查询延迟而设计: ...

  8. WPF学习12：基于MVVM Light 制作图形编辑工具（3）

    本文是WPF学习11:基于MVVM Light 制作图形编辑工具(2)的后续 这一次的目标是完成 两个任务. 本节完成后的效果: 本文分为三个部分: 1.对之前代码不合理的地方重新设计. 2.图形可选 ...

  9. Spring Boot整合Spring Batch

    引言 Spring Batch是处理大量数据操作的一个框架,主要用来读取大量数据,然后进行一定的处理后输出指定的形式.比如我们可以将csv文件中的数据(数据量几百万甚至几千万都是没问题的)批处理插入保 ...

  10. UI常用字体定义和继承的实例，ResearchKitCode

    #import <UIKit/UIKit.h> @interface UIFont (APCAppearance) + (UIFont*) appRegularFontWithSize: ...