H5学习新增属性

一、draggable

1.简介

规定元素是否可拖动
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 浏览器支持 draggable 属性

<div draggable="true"></div>

有些标签默认属性值为true，即默认可以拖拽：<a href=""></a>、<img src="" alt="">...

2.拖拽周期

1. 拖拽开始
2. 拖拽中
3. 拖拽结束（撒放）

3.拖拽组成

1. 被拖拽的物体
2. 目标区域

4.拖拽事件

记录了拖拽事件的一些信息，如起始点，目的地等 （当拖拽结束时，默认事件是回到原处）
事件由行为触发，但一个行为可能不止触发一个事件

div.ondragstart = function(e){
    console.log(e);//拖拽开始才出发（移动时）
}
div.ondrag = function(e){
    console.log(e);//进行中
}
div.ondragend = function(e){
    console.log(e);//结束（释放）
}
target.ondragenter = function(e){
    console.log(e);//鼠标拖拽点进入目标区触发
}
target.ondragover = function(e){
    console.log(e);//在目标区域移动才出发
}
target.ondragleave = function(e){
    console.log(e);//离开目标区域
}
target.ondrop = function(e){
    console.log(e);//因为ondragover后默认回到原处（可以设置执行drop时间，即组织默认事件）
    //所以在ondragover中e.preventDefault()阻止默认事件才能触发（比ondragend前）
}
target.ondragstart = function(e){
    e.dataTransfer.effectAllowed = 'link';//改变拖拽进目标时的鼠标样式
}
target.ondrop = function(e){
    e.dataTransfer.dropEffect = 'link';//两者只能一一对应设置，兼容性很差
}

DataTransfer.effectAllowed 属性指定拖放操作所允许的一个效果。copy 操作用于指示被拖动的数据将从当前位置复制到放置位置
none此项表示不允许放下
copy源项目的复制项可能会出现在新位置。
copyLink允许 copy 或者 link 操作。
copyMove允许 copy 或者 move 操作。
link可以在新地方建立与源的链接。
linkMove允许 link 或者 move 操作。
move一个项目可能被移动到新位置。
all允许所有的操作。
uninitialized效果没有设置时的默认值，则等同于 all。

A-B（阻）-C，若C是B默认事件，要阻止C，要在B阻止，即调用链（责任链模式）

5.应用一

<script>
    var div = document.getElementsByTagName('div')[0];
    var beginX = null;
    var beginY = null;
    div.ondragstart = function(e){
        beginX = e.clientX;
        beginY = e.clientY;
    }

    div.ondragend = function(e){
        var x = e.clientX - beginX;
        var y = e.clientY - beginY;
        this.style.left = this.offsetLeft + x + 'px';
        this.style.top = this.offsetTop + y + 'px';
    }
</script>

6.应用二

方块拖拽

<div class="box1">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<div class="box2"></div>
<script>
    var dragDom;
    var box1 = document.getElementsByClassName('box1')[0];
    var box2 = document.getElementsByClassName('box2')[0];
    var lis = document.getElementsByTagName('li');
    for(var i = 0;i < lis.length;i ++){
        lis[i].setAttribute('draggable',true);
        lis[i].ondragstart = function(e){
            dragDom = e.target;
        }
    }
    box2.ondragover = function(e){
        e.preventDefault();
    }
    box2.ondrop = function(e){
        box2.appendChild(dragDom);
        dragDom = null;
    }
    box1.ondragover = function(e){
        e.preventDefault();
    }
    box1.ondrop = function(e){
        box1.appendChild(dragDom);
        dragDom = null;
    }
</script>