今天想用jquery来实现div的拖放功能
html5标签。拖放(Drag 和 drop)是 HTML5 标准的组成部分。
步骤一:首先设置标签可以被拖 draggable="true"
步骤二:选取被拖的标签,和要放置被拖标签的容器标签。
步骤三:input框默认可以接收text,但div是拒绝接收一切内容,所有此时要记得阻止div的默认行为。
拖放标签的所拥有的事件 dragstart事件 drag事件 dragend事件
对于被放置的标签而言所拥有的事件
1. dragenter事件(拖放目标进去)
2. dragover 事件 (目标标签在里面移动)
3. 如果移除放置标签 会出发dragleave 事件
4. 如果把拖放的标签放到了放置标签里面去 会触发drop事件
注意
1. 每一个标签都有一个可以接收的数据类型 是需要在dragover事件中阻止他的默认行为
2. 火狐浏览器上海需要在 dragenter事件中阻止他的默认行为 event.preventDefault
3. 不同标签代表的数据也是不同的 a标签href地址
在拖放标签dragstart事件中 通过event.dataTransfer.setData() 方法设置被拖的数据
在放置区域drop事件中通过 event.dataTransfer.getData('text')方法设置接收数据的类型
//拖拽div开始的时候触发
img.addEventListener('dragstart', function(event) {
console.log(1);
event.dataTransfer.setData('Text',event.target.id);
}, false); //在拖放的过程中,会一直不停地触发drag事件
// div.addEventListener('drag', function() {
// console.log('drag');
// }, false); //拖放结束的时候,触发dragend事件
div.addEventListener('dragend', function() {
console.log('dragend');
}, false); //对于被放置的标签而言,所拥有的事件
//如果有正在被拖放的标签进入到此标签里面,触发dragenter事件
big.addEventListener('dragenter', function() {
console.log('dragenter');//火狐在开始进入就要阻止其默认行为
}, false); big.addEventListener('dragover', function(event) {
event.preventDefault();//阻止默认行为:div是默认为不接受东西
console.log('dragover');
}, false); //如果移出了放置标签,触发dragleave事件
big.addEventListener('dragleave', function(event) {
event.preventDefault();
console.log('dragleave');
}, false); //如果把拖放的标签放在放置标签里,就会触发标签的Drop事件
big.addEventListener('drop', function(event) {
// console.log('drop');
// big.innerHTML = big.innerHTML + event.dataTransfer.getData('jpg');
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data)); }, false); div.addEventListener('drop', function(event) {
// console.log('drop');
// big.innerHTML = big.innerHTML + event.dataTransfer.getData('jpg');
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data)); }, false);
今天想用jquery来实现div的拖放功能的更多相关文章
- 脚本div实现拖放功能
脚本div实现拖放功能 网页上有很多拖曳的操作,比如拖动树状列表,可拖曳的图片等. 1.原生拖放实现 <!doctype html> <html lang="en" ...
- jquery.Table实现的翻页功能比较完整漂亮,本想扩展个模版DIV
jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...
- jQuery.swatches – 把 Div 变成可爱的调色板
jQuery.swatches 是一款开源的 jQuery 插件,能够把一个 Div 转换成漂亮的调色板.您可以自定义你想要的类,使用不同的类可以生成不同的调色板.这个功能能够帮助设计师方便的挑选设计 ...
- jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...
- jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- jQuery实现的Div窗口震动效果实例
本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.Fi ...
- jQuery 弹出div层
目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...
- JQuery button控制div或者section
一.项目你需求 点击左边导航栏的某个按钮,右边内容栏显示出,相应的内容 效果如图 二.html与css.jQuery 1.div模式 <!DOCTYPE html PUBLIC " ...
- jQuery生成一个DIV容器,ID是"rating".
我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数.看一下rate.php代码.虽然这些例子也可以不使用AJAX来实现,但显示我们不会那么做 ...
随机推荐
- SQL Server 2012 配置数据库邮件
发送和接受邮箱不能用QQ邮箱,可以用163网易邮箱,同时要求要发送邮件的计算机能上外网 查看163网易邮箱的发送和接收服务器的方法如下 在数据库的管理中,右击数据库邮件,选择配置数据库邮件 出现对话框 ...
- log4net:保存日志到数据库
1:下载log4net http://logging.apache.org/log4net/download_log4net.cgi 2:引用到项目 下载以后,在项目中引用log4net.dll 3: ...
- RabbitMQ介绍6 - 其它
深入话题 Exchange实现路由的方法 http://www.rabbitmq.com/blog/2010/09/14/very-fast-and-scalable-topic-routing-pa ...
- 使用 Sublime、WebStorm 开发 Jade
Sublime.WebStorm (PhpStorm) 是前端开发者的得力工具,开发 Jade 也不例外. 在配置这些软件的 Jade 开发环境前,请先在系统中安装 Node.js 和 Jade : ...
- 高并发分布式系统中生成全局唯一Id汇总
数据在分片时,典型的是分库分表,就有一个全局ID生成的问题.单纯的生成全局ID并不是什么难题,但是生成的ID通常要满足分片的一些要求: 1 不能有单点故障. 2 以时间为序,或者ID里包含时间 ...
- [ActionScript 3.0] AS3.0 让一个视频无缝循环播放的一个偏方
一个视频要循环播放,通常的办法都是播放完后再重新播放,但是不可避免的播放结束和重新开始播放这个时间点上会有停顿,如何解决这个问题,说个偏方吧! package com.views { import f ...
- css绝对定位问题
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Arch命令行与安装包
>>mkfs.vfat # pacman -S do ...
- Symfony2 资料篇
http://www.chrisyue.com/symfony2-in-action-day-1.html 由于Symfony2现在还没有很完善的中文文档,所以不想看文档的同学可以直接进行点击上面的链 ...
- ORCLE数据库导出导入
从一个用户导出用户所有结构数据 再导入另一个用户里面 ORACLE导出用户下的数据库 exp 命令 用户名/密码服务名 文件地址 owner=(用户名)exp COM_HIOSC_OLD/COM_ ...