码迷,mamicode.com
首页 > Web开发 > 详细

HMTL5+js 拖动备份

时间:2016-05-31 12:07:52      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:

  html增加了拖动事件,这个吸引人的事件该怎么用呢,今天做个整理,以备以后查阅,且分享与到家,欢迎批评指正。

               技术分享

  以上是关于拖放事件的说明。

以下实现一个最简单的例子。

1.建立两个容器(div),添加ondragover事件,个人理解是拖动经过时触发的事件,监听方法( ev.preventDefault())很简单,就是允许放置拖放进来的元素(默认是不允许的);

2.为这两个容器添加ondrop,个人理解是当拖动到一个地方,放开鼠标触发的事件,监听方法是为这个容器添加拖动进来的元素,那添加的元素怎么获得呢,就需要拖动对象传递的参数中获得,拖动对象怎么传递参数,请看第4步,(

ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));

3.设置元素可以拖动属性为true,即draggable = ‘true‘

4.为需要拖动的对象添加监听ondragstart,个人理解就是当拖动开始的时候触发的事件,此事件的监听方法是传递本身的参数

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

 

HMTL5+js 拖动备份

标签:

原文地址:http://www.cnblogs.com/xiaolhp/p/5545103.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!