javascript拖拽操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#target {
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;
border: 3px dashed #ccc;
}
#target.active {
background: #eee;
box-shadow: 2px 2px 2px #eee;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<img src="toy.png">
<p>选择文字拖到目标位子</p>
</div>
<div id="target">
<span>拖动文字到这里</span>
</div>
</div>
<script type="text/javascript">
(function() {
var target = document.querySelector('#target');
target.addEventListener('dragenter', function() {
this.classList.add('active');
})
target.addEventListener('dragleave', function() {
this.classList.remove('active');
})
//阻止冒泡和默认行为
target.addEventListener('dragover', function(e) {
e.preventDefault();
e.stopPropagation();
})
//目标框得到drop事件
target.addEventListener('drop', function(e) {
var data = e.dataTransfer.getData('text/plain');
var imgSrc = e.dataTransfer.getData('text/uri-list');
if (data) {
// 拖入的是文本
target.innerHTML = data;
} else if (imgSrc) {
var img = document.createElement('img');
img.src = imgSrc;
target.appendChild(img);
}
this.classList.remove('active');
e.preventDefault();
e.stopPropagation();
})
})()
</script>
</body>
</html>
javascript拖拽操作的更多相关文章
- H5 拖拽操作
H5 拖拽操作 前言 在原生H5中,可以通过提供的api实现在网页内元素的拖拽操作.相对于传统的写法更加的简单. 而想要实现拖拽,主要需要进行两个方面的工作,第一是给元素设置draggable='tr ...
- Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
- Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理
今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...
- Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理
今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...
- C#拖拽操作
C#的拖拽 本文将以Winform为例 有两个主要的事件: DragEnter 拖拽到区域中触发的事件 DragDrop 当拖拽落下的时候出发此事件 饮水思源 参考博客: http://www.cnb ...
- WPF 的拖拽操作（DragDrop）
在WPF中似乎没有对拖拽操作进行改变,和以前的方式一样.如果曾近在 Windows 窗体应用程序中使用过鼠标拖放,就会发现在 WPF 中的编程接口实际上没有发生变化.重要的区别是用于拖放操作的方法和事 ...
- 微信小程序~触摸相关事件（拖拽操作、手势识别、多点触控）
touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 touchend 手指触摸动作结束 ...
- selenium中各个模块操作：下拉框、鼠标悬浮连贯、拼图拖拽操作、以及其他拖拽操作、连线操作
1.下拉框的修改操作 方法一:定位到元素后,通过select选择对应的值 方法二:通过两次点击的方法:没有select的value属性时,采用click两次的方法去选择: click第一次后,出现下拉 ...
- 爱上MVC3~MVC+ZTree实现对树的CURD及拖拽操作
回到目录 上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除 ...
随机推荐
- “ sgen.exe ”已退出，代码为 1
解决方案:visual studio 2010 选定web项目,右键选择“属性”—“生成”,将“生成序列化程序集”设成“关闭”. 若你使用的是Visual Studio 2012,还需要在“标准”工具 ...
- 百度地图Api进阶教程-实例高级操作8.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- ubuntu配置JDK
1.下载JDK jdk-8u151-linux-x64.tar.gz 2.1.解压压缩包 tar -xzvf jdk-8u151-linux-x64.tar.gz 2.2.编辑~/.bashrc ex ...
- matlab中log函数与rssi转距离
我们通常所说的log是指以10为底的对数,而MATLAB中的log却不是这样.Matlab中的log函数在默认情况下是以e为底,即loge,如果需要计算以10为底的对数,那么需要用log10()函数. ...
- sqlmap注入常见用法一条龙 【转】
sqlmap是一个灰常强大的sql注入检测与辅助工具,但是由于没有图形界面,基本上用起来比较麻烦,导致很多人可能宁愿用havij或者是pangonlin也不愿意麻烦去翻帮助界面,我自己也是把很多语句贴 ...
- svn -- svn权限控制
权限控制 问题:当前采用单仓库或多仓库配置中,所有的文件权限都是可读写的,这样就会存在一个问题,只要任何知道了我们的访问地址,那么都可以对文件进行读写操作. 1.为什么需要权限控制 打开服务器端的项目 ...
- 说说PHP中foreach引用的一个坑
From: http://blog.csdn.net/yipiankongbai/article/details/45307767 先来看看下面这段代码: <?php $arr = array( ...
- php判断文件存在是用file_exists 还是 is_file
From: http://www.php100.com/html/php/hanshu/2013/0905/4672.html [导读] 在写程序时发现在判断文件是否存在时,有两种写法,有的人用了is ...
- PHP中单引号与双引号的区别分析
From: http://www.jb51.net/article/53973.htm 在PHP中,我们可以使用单引号或者双引号来表示字符串.不过我们作为开发者,应该了解其中的区别.单引号与双引号对于 ...
- 近期全国各地联通线路无法访问OA的解决方案
最近有多地区使用联通线路的用户无法访问easyradius控制台,即oa.ooofc.com,其主要的原因是由于联通的DNS解析错误,导致的 oa.ooofc.com的解析IP是115.239.252 ...