文档章节

HTML5拖拽+demo

村北稻山
 村北稻山
发布于 2016/12/11 22:05
字数 1067
阅读 405
收藏 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
昌平
私信 提问
加载中

评论(0)

html5新效果,请各位同事本周学习一下

Twitter“点赞”红心按钮CSS3动画特效 http://www.htmleaf.com/Demo/201508302494.html HTML5 SVG制作滚动变形的半圆形页面头部特效 http://www.htmleaf.com/html5/SVG/201508302493.html H......

hi30059478
2016/02/21
18
0
使用HTML5技术绘制思维导图

客户常常提到思维导图,喜欢它的结构展示方式,和交互的友好,从图论的角度看,思维导图本质上是一种树,有一个根节点(主题)出发,联想到其他话题,于是分支开花,再分支,有时候也会构成网...

nosand
2014/03/25
1.2W
0
原生Javascript+HTML5一步步实现拖拽排序

前言 本文的内容就如题所述,之所以写这么个东西是有原因的,因为这两天重做公司的一个功能发现里面需要一个拖拽排序的功能.以前都是使用jquery各种插件去搞,因为这个项目不限制浏览器兼容问题...

顽Shi
2014/04/05
4K
6
Angular动态表单生成(七)

动态表单生成之拖拽生成表单(上) 这个功能就比较吊炸天了,之前的六篇,都是ng-dynamic-forms自带的功能,可能很多的说明官方的文档都已经写了,我只是个搬运工,而在这篇文章中,我将化身...

osc_2qxlyxer
2018/03/03
3
0
详解javascript拖拽(一)基础介绍

人类喜欢将工作或活动步骤化:第一步、第二步、第三步等,因为分解让人类得以分工并优化局部。 一个作家构思一部鸿篇巨制,必然要考虑将内容划分为几个部分,每个部分刻画相应的人物背景故事....

AndyLaw
2018/12/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

史上最全的“文件或目录损坏且无法读取”的解决办法大集合

问题描述: G盘打不开文件或目录损坏且无法读取,是因为这个I盘的文件系统内部结构损坏导致的。史上最全的“文件或目录损坏且无法读取”的解决办法大集合具体的恢复方法看正文 工具/软件:极...

计算无敌
今天
9
0
2048游戏的最佳算法是什么? - What is the optimal algorithm for the game 2048?

问题: I have recently stumbled upon the game 2048 . 我最近偶然发现了2048游戏。 You merge similar tiles by moving them in any of the four directions to make "bigger" tiles. 您可......

javail
今天
9
0
Spring Cloud Ribbon 客户端负载均衡

Ribbon客户端组件提供一系列完善的配置选项,比如连接超时、重试、重试算法等,内置可插拔、可定制的负载均衡组件。下面是用到的一些负载均衡策略: 简单轮询负载均衡 加权轮询负载均衡 区域...

泥瓦匠BYSocket
今天
7
0
为什么在Python 3中“范围(1000000000000000(1000000000000001))”这么快?

问题: It is my understanding that the range() function, which is actually an object type in Python 3 , generates its contents on the fly, similar to a generator. 据我了解, ra......

技术盛宴
今天
9
0
OSChina 周四乱弹 —— 卖全家桶!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :陈慧娴的单曲《与泪抱拥》 陈慧娴的嗓音加上向雪怀的词,这样的经典组合真不多。#今日歌曲推荐# 《与泪抱拥》- 陈慧娴 手机党少年...

小小编辑
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部