拖拽属性

拖拽属性是H5的新特性：
是指鼠标点击源对象之后，不松手将其拖拽到目标对象，或半途松手(释放)的过程
拖拽 Drag
源对象： 指定的鼠标点击的一个事物，例如： 一个元素，一个图片等
目标对象： 指定是我们拖动源对象后，预计要进入的区域
1. 被拖动的源对象可以触发的方法：
1) ondragstart: 源对象开始被拖动
2) ondrag: 被拖动过程中
3) ondragend: 源对象被拖动结束
2. 源对象进入目标对象可以触发的事件
1) ondragenter： 源对象进入目标对象时触发
2) ondragover: 源对象悬停在目标对象上方时触发
3) ondragleave: 源对象被拖动着离开目标对象时触发
4) ondrop: 源对象在目标对象上松手时 触发
拖拽属性 一共就是这7个方法。 每一个都需要记忆
event.dataTransfer： 数据传递对象
功能： 用于在源对象和目标对象之间传递数据
setData(): 设置数据 参数是 key 和 value(value必须是字符串)
getData(): 获取数据，参数是key 。 通过key去获取对应的value值

标签中自带的属性： draggable 是否可以拖拽， 默认值 false

        <div id="box" draggable="true">哈哈</div>
        <div id="two" draggable="true">嘻嘻</div>
    <script>
        var box = document.getElementById("box");
        var two = document.getElementById("two");
        //定义全局变量，存储鼠标的位置
        var offsetX;
        var offsetY;
        //开始拖动时
        box.ondragstart = function (ev) {
            //获取鼠标在元素上的位置
            offsetX = ev.offsetX;
            offsetY = ev.offsetY;
            ev.dataTransfer.setData("text",this.innerText);
            console.log(typeof this.innerText);
        }
        //源对象被拖动时
        box.ondrag = function (ev) {
            var x = ev.clientX;
            var y = ev.clientY;
            //drag事件最后一刻，无法读取鼠标的坐标， x 和 y 都会变成0
            if(x == 0 && y == 0){
                return false; //直接结束，不赋值给元素
            }
            x -= offsetX;
            y -= offsetY;
            this.style.left = x + "px";
            this.style.top = y + "px";
        }
        //拖动结束时
        box.ondragend = function (ev) {
            // alert("拖完了");
        }
        //源对象进入目标对象时 触发
        two.ondragenter = function (ev) {
            two.style.backgroundColor = "yellow";
        }
        //从目标对象出去时 触发的方法
        two.ondragleave = function (ev) {
            two.style.backgroundColor = "red";
        }
        two.ondragover = function (ev) {
            //为了使ondrop方法生效，阻止默认事件
            // ev.stopPropagation();         阻止冒泡
            // 阻止默认事件的 方式1：
            ev.preventDefault();
             //方式2
             // return false;
        }

在目标对象上松手时触发
直接使用 ondrop方法的时候，是无法触发的，我们需要在ondragover中做一下处理

       two.ondrop = function (ev) {
            // this.innerHTML = "我被释放了·";
            // console.log("触发");
            this.innerHTML = ev.dataTransfer.getData("text");
        }

使用JSON对象中的方法 转换 字符串和对象的数据类型

 var str = new String();
        var obj = {};
        //JSON.stringify(对象) ： 可以将对象类型 转换为字符串类型
        // console.log(typeof JSON.stringify(obj));
        //JSON.parse(字符串) ：  可以将字符串类型  转换为对象类型
        console.log(typeof JSON.parse(str));