文档章节

HTML5拖拽+demo

村北稻山
 村北稻山
发布于 2016/12/11 22:05
字数 1067
阅读 50
收藏 0
点赞 0
评论 0

有两个星期没写博客了,今天晚上和兄弟出去喝了几杯酒,乘着酒意写下这篇两个星期前一直想写的博客,再坚持一会就双12了,抢个商品,哎不废话了,说正经事。 拖拽事件类似于鼠标的一系列事件,有

  • ondragstart,对象是被拖拽元素
  • ondrag,对象是被拖拽元素
  • ondragenter,对象是目标元素
  • ondragover,对象是目标元素
  • ondragleave,对象是目标元素
  • ondrop,对象是目标元素
  • ondragend,对象是被拖拽元素

拖拽(拖放)大致分为两个过程,即拖(drag)与放(drop),所以下文都称为拖放,HTML5的拖放事件用起来简单,主要得益于可以通过event对象获得拖拽的相关数据,即获取到被拖对象和目标位置对象。

W3C网站对拖放有简单的介绍:http://www.w3school.com.cn/html5/html_5_draganddrop.asp (先阅读)。 可以清楚,获得被拖拽对象是通过event对象的两个方法,如下:

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

而获得目标对象是通过ev.target方法,所以认识到了这两点就抓住了拖放的主要内容。 下面是我自己写的一个小demo。 html代码如下:

    <div id="left_out">
        <div id="header_name">
            <h2>拖动客户制定计划</h2>
        </div>
        <ul>
            <li title="拖拽我到右侧">拖拽我1</li>
            <li title="拖拽我到右侧">拖拽我2</li>
            <li title="拖拽我到右侧">拖拽我3</li>
            <li title="拖拽我到右侧">拖拽我4</li>
        </ul>
    </div>
    <div id="right_out">
        <div class="weekBox" id="week1"><h2>周一</h2></div>
        <div class="weekBox" id="week2"><h2>周二</h2></div>
        <div class="weekBox" id="week3"><h2>周三</h2></div>
        <div class="weekBox" id="week4"><h2>周四</h2></div>
        <div class="weekBox" id="week5"><h2>周五</h2></div>
        <div class="weekBox" id="week6"><h2>周六</h2></div>
        <div class="weekBox" id="week7"><h2>周日</h2></div>
    </div>

css代码如下:


#left_out{
    width: 180px;
    height: 400px;
    float: left;
    border: 1px solid #cccccc;
    margin-right: 5PX;
}

#header_name{
    padding: 10px;
    text-align: center;
    background: #cccccc;
}


#left_out #header_name h2{
    font-weight: 900;
    font-size: 16px;
}

#left_out ul{
    width: 180px;
    height: 400px;
}

#left_out ul li{
    margin-top: 3px;
    font-size: 14px;
}

#left_out ul li:hover{
    background-color: #bababa;
    cursor: move;
}

.weekBox{
    float: left;
    width: 150px;
    border: 1px solid #bababa;
    height: 400px;
}

#right_out h2{
    width:100%;
    height: 40px;
    line-height: 40px;
    font-weight: 900;
    text-align: center;
    background: #cccccc;
}

js代码如下(得引入jQuery包):

//    给li元素添加拖拽相关的属性
$("#left_out ul li").attr("draggable","true").attr("ondragstart","drag(event)").each( function (index,ele){
    $(this).attr("id",'li'+index);
});
//    给右边目的地添加拖拽相关的属性
$("#right_out .weekBox").attr("ondragover","allowDrop(event)").attr("ondrop","drop(event)");
//    给左边目的地添加拖拽相关的属性
$("#left_out ul").attr("ondragover","allowDrop(event)").attr("ondrop","dropRemove(event)");

//  下面都是原生js
function allowDrop(ev)
{
    ev.preventDefault();
    ev.stopPropagation();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
function dragRemove(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);

}

//   enter右边元素时高亮
function dragenter(ev){
//       需判断,如果被拖拽元素来源于左边才高亮
    var data=ev.dataTransfer.getData("Text");
    console.log(data)
    var drapNode=document.getElementById(data);
    console.log(drapNode)
    var drapNodeId=$(drapNode).attr("id") || "";
    console.log(drapNodeId)// getAttribute()这方法谷歌不兼容
    if(!(drapNodeId.indexOf("Right")==-1)){
        return false
    }
    $(ev.target).css({
        "color":"#FFFFFF",            //Object.style这方法火狐不兼容
        "backgroundColor":"red"
    });
}
//    leave右边元素时恢复,不高亮
function dragleave(ev){
    $(ev.target).css({
        "color":"#000000",
        "backgroundColor":"#FFFFFF"
    });

}
var index=0;
function drop(ev)
{

//      克隆拖动的元素,如果拖动的元素来源于左边,则添加到右边或替换右边的元素,如果不是,则return false。
    ev.preventDefault();
    ev.stopPropagation();
    var data=ev.dataTransfer.getData("Text");
    var drapNode=document.getElementById(data).cloneNode(true);
    var drapNodeId=drapNode.id;
    if(!(drapNodeId.indexOf("Right")==-1)){
        return false
    }

//      给准备拖放在右边的元素添加可以拖回左边的属性
    drapNode.setAttribute("id",drapNodeId+"Right"+index);
    index++;
    drapNode.setAttribute("ondragstart","dragRemove(event)")
    drapNode.style.cursor="move";
    drapNode.title="拖拽我回家"

    drapNode.style.border="1px solid #cccccc"
    drapNode.style.marginTop="2px"

    if(ev.target.id.indexOf("li")==-1){
        //添加
        ev.target.appendChild(drapNode);  //  在目标位置上添加
    }else{
        //替换
        ev.target.parentNode.insertBefore(drapNode,ev.target)
        ev.target.parentNode.removeChild(ev.target);
    }
    var rightList=document.getElementById("right_out").getElementsByTagName("li");
    for(var i=0;i<rightList.length;i++){
        rightList[i].setAttribute("ondragenter","dragenter(event)");
        rightList[i].setAttribute("ondragleave","dragleave(event)");
    }
}

//  这个函数用于实现将右边的元素拖回左边的功能,判断拖动的元素是否来源于右边,若是则删除拖动的元素,否则返回false。
function dropRemove(ev)
{
    ev.preventDefault();
    ev.stopPropagation();
    var data=ev.dataTransfer.getData("Text");
    var drapNode=document.getElementById(data);
    var drapNodeId=drapNode.id;
    if(drapNodeId.indexOf("Right")==-1){
        return false
    }
    drapNode.parentNode.removeChild(drapNode);
}

效果图如下: 输入图片说明

效果为:最左侧的li元素可以拖到右侧的七个div中,还可以进行替换并且高亮,右侧七个div中的li元素可以拖回最左侧进行删除。 感觉js写的有点乱,后面有时间再改吧。

© 著作权归作者所有

共有 人打赏支持
村北稻山
粉丝 9
博文 15
码字总数 9091
作品 0
昌平
HTML5拖拽API实现vue树形拖拽组件

因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽。近期有时间将核心部分代码抽出,简单说下实现方式。 1.树形结构-组件递归使用 树形结构...

花卷爱学习 ⋅ 05/10 ⋅ 0

Web前端最全面试宝典- Html篇

HTML 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访...

颜卿今天Coding了吗 ⋅ 2017/03/04 ⋅ 0

爱创课堂每日一题第四十八天- html5有哪些新特性、移除了那些元素?

问题: html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5? 答案: HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务...

全栈web笔记 ⋅ 2017/11/07 ⋅ 0

Html5学习系列

Html5学习系列 HTML5 规定了一种通过 video 元素来包含视频的标准方法 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件...

writeademo ⋅ 2016/08/14 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/23 ⋅ 0

jQuery文件上传插件Uploadify(转)

一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列。 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用。 由于官方提供的版本是flash免费,html5版本...

easonjim ⋅ 2017/01/05 ⋅ 0

cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式

写在前面: 前端开发的时候,在网页刷新的时候,所有数据都会被清空,这时候就要用到本地存储的技术,前端本地存储的方式有三种,分别是cookie,localstorage和sessionStorage ,这是大家都知...

OB丶Koro1 ⋅ 2017/11/27 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 28分钟前 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

小致dad ⋅ 40分钟前 ⋅ 0

Python 数电表格格式化 xlutils xlwt xlrd的使用

需要安装 xlutils xlwt xlrd 格式化前 格式化后 代码 先copy读取的表格,然后按照一定的规则修改,将昵称中的学号提取出来替换昵称即可 from xlrd import open_workbookfrom xlutils.copy ...

阿豪boy ⋅ 今天 ⋅ 0

面试题:使用rand5()生成rand7()

前言 读研究生这3 年,思维与本科相比变化挺大的,这几年除了看论文、设计方案,更重要的是学会注重先思考、再实现,感觉更加成熟吧,不再像个小P孩,人年轻时总会心高气傲。有1 道面试题:给...

初雪之音 ⋅ 今天 ⋅ 0

Docker Toolbox Looks like something went wrong

Docker Toolbox 重新安装后提示错误:Looks like something went wrong in step ´Checking if machine default exists´ 控制面板-->程序与应用-->启用或关闭windows功能:找到Hyper-V,如果处......

随你疯 ⋅ 今天 ⋅ 0

Guacamole 远程桌面

本文将Apache的guacamole服务的部署和应用,http://guacamole.apache.org/doc/gug/ 该链接下有全部相关知识的英文文档,如果水平ok,可以去这里仔细查看。 一、简介 Apache Guacamole 是无客...

千里明月 ⋅ 今天 ⋅ 0

nagios 安装

Nagios简介:监控网络并排除网络故障的工具:nagios,Ntop,OpenVAS,OCS,OSSIM等开源监控工具。 可以实现对网络上的服务器进行全面的监控,包括服务(apache、mysql、ntp、ftp、disk、qmail和h...

寰宇01 ⋅ 今天 ⋅ 0

AngularDart注意事项

默认情况下创建Dart项目应出现以下列表: 有时会因为不知明的原因导致列表项缺失: 此时可以通过以下步骤解决: 1.创建项目涉及到的包:stagehand 2.执行pub global activate stagehand或pub...

scooplol ⋅ 今天 ⋅ 0

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部