【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. Tcp实现省略编码

    import socket class My_socket(socket.socket): def __init__(self, encoding='utf-8'): self.encoding = ...

  2. ACM_X章求和（数学）

    X章求和 Time Limit: 2000/1000ms (Java/Others) Problem Description: X章最喜欢求和了,他一看到什么鬼就什么鬼都加起来.one day,他得到 ...

  3. Harris角点检测原理及实现

    一.原理 二.实现 close all; clear all; I=imread('test.tif'); [posX,posY]=harris(I); figure;imshow(I); hold ...

  4. Maven聚合模式

    项目的打包类型:pom.jar.war 项目中一般使用maven进行模块管理,每个模块下对应都有一个pom文件,pom文件中维护了各模块之间的依赖和继承关系.项目模块化可以将通用的部分抽离出来,方便重 ...

  5. HAL之PWM

    PWM是定时器的一个输出功能,要分配在有对应输出的管脚上.分频和定时值决定了周期,捕获寄存器的值就是占空比,当计数寄存器的值小于捕获值时输出固定电平(H),当大于时翻转电平,当计数器值溢出时将重载值载 ...

  6. Mysql读写分离操作之mysql-proxy

    常见的读写方式 基于程序代码内部实现 在代码中根据select.insert进行选择分类:这类方法也是生产常用的,效率最高,但是对开发人员比较麻烦.架构不能灵活调整 基于中间件的读写分离: mysql ...

  7. linux高负载下mysql数据库彻底优化

    同时在线访问量继续增大 对于1G内存的服务器明显感觉到吃力严重时甚至每天都会死机 或者时不时的服务器卡一下 这个问题曾经困扰了我半个多月MySQL使用是很具伸缩性的算法,因此你通常能用很少的内存运行或 ...

  8. 搭建Sql Server AlwaysOn 视频教程

    本人搭建关于Sql Server 2012 AlwaysOn 的视频系列教程. 教程一: 观看及下载地址:https://pan.baidu.com/s/1QAvhgFTSyvpR5xQZbKHO3w ...

  9. node入门（三）——gulp运用实例

    在上一篇<node入门(二)——gulpfile.js初探>中,我们知道了(看懂入门二及其参考资料)怎么运用gulp来更高效的开发,现在来示范一下. 在package.json里面配置好d ...

  10. 【学习笔记】深入理解js原型和闭包（2）——函数和对象的关系

    上文(深入理解jS原型和闭包(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; console.log ...