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的拖放功能的更多相关文章

  1. 脚本div实现拖放功能

    脚本div实现拖放功能 网页上有很多拖曳的操作,比如拖动树状列表,可拖曳的图片等. 1.原生拖放实现 <!doctype html> <html lang="en" ...

  2. jquery.Table实现的翻页功能比较完整漂亮,本想扩展个模版DIV

    jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...

  3. jQuery.swatches – 把 Div 变成可爱的调色板

    jQuery.swatches 是一款开源的 jQuery 插件,能够把一个 Div 转换成漂亮的调色板.您可以自定义你想要的类,使用不同的类可以生成不同的调色板.这个功能能够帮助设计师方便的挑选设计 ...

  4. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  5. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  6. jQuery实现的Div窗口震动效果实例

    本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.Fi ...

  7. jQuery 弹出div层

    目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...

  8. JQuery button控制div或者section

    一.项目你需求 点击左边导航栏的某个按钮,右边内容栏显示出,相应的内容 效果如图   二.html与css.jQuery 1.div模式 <!DOCTYPE html PUBLIC " ...

  9. jQuery生成一个DIV容器,ID是"rating".

    我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数.看一下rate.php代码.虽然这些例子也可以不使用AJAX来实现,但显示我们不会那么做 ...

随机推荐

  1. 【uTenux实验】信号量

    信号量(semaphore)是一个用来指示可用的资源并将可用资源的数量以数值的形式表示出来的对象.当使用一组资源时,信号量用来实现互斥控制和同步.uTenux提供了信号量出来的API,可以很方便地使用 ...

  2. winXP下安装opensshd服务

    1)参考如下帖子:http://blog.chinaunix.net/uid-23187544-id-2527564.html http://wuhuizhong.iteye.com/blog/122 ...

  3. css学习笔记(6)

    +++++++++++++++++ CSS HACK+++++++++++++++++IE6.0 能识别 _background:#ff00ff; *background:#ff00ff; +back ...

  4. Angular学习

    一.Angular是什么 基于JS的框架,类似JQuery,利用数据绑定和依赖注入实现页面数据的渲染,无需人为写大量的JS,减少了代码量,优美了代码. 二.Angular优缺点 Angular适用与C ...

  5. 数据库 MySql

    MySql 一,概述 1,什么是数据库? 数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其为数据库 二,下载安装 想要使用MySQL来存储并操作数据,则需要做几件事情: a. 安装My ...

  6. java 学习备忘录(一):jsp项目建立及开发环境的基本配置

    Tomcat与eclipse配置 窗口->显示视图->Server 新建项目 建“动态web项目” 新建jsp文件 新建->其他->Web->jsp file 设置使用“ ...

  7. Symfony2 资料篇

    http://www.chrisyue.com/symfony2-in-action-day-1.html 由于Symfony2现在还没有很完善的中文文档,所以不想看文档的同学可以直接进行点击上面的链 ...

  8. css兼容问题集合

    css兼容问题 兼容问题 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白 ...

  9. C#DataGridView中的常用技巧

    0(最基本的技巧). 获取某列中的某行(某单元格)中的内容  this.currentposition = this.dataGridView1.BindingContext  [this.dataG ...

  10. ERROR SparkUncaughtExceptionHandler: Uncaught exception in thread

    ERROR SparkUncaughtExceptionHandler: Uncaught exception in thread Thread[appclient-registration-retr ...