鼠标拖拽事件

1.鼠标拖拽事件

        var $p1 = document.getElementById('p1')
		// 被拖动的源对象可以触发的事件
        // 1. ondragstart： 事件源拖动开始的时候触发
        $p1.ondragstart = function() {
            console.log(11111);
        }

        // 2. ondrag： 事件源拖动过程中一直触发（ 可能在移动有可能没动）
        $p1.ondrag = function() {
            console.log(22222);
        }

        // 3. ondragend： 事件源拖动结束的时候触发
        $p1.ondragend = function() {
            console.log(33333);
        }
        // 拖动源对象可以进入目标对象可以触发的事件
        // 1.ondragenter：源对象拖拽到目标对象上触发
        $div2.ondragenter = function() {
            console.log(4444);
        }

        // 2.ondragover：源对象在目标对象上方一直触发，直到松开鼠标或离开目标对象
      	$div2.ondragover = function(e) {
            e.preventDefault()
        }
        // 3.ondragleave：源对象离开目标对象时触发
        $div2.ondragleave = function() {
            console.log(666666);
        }

2.存储数据

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性， 该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

 document.getElementById("bt1").onclick = function() {
        var a = document.getElementById('inp').value

        // sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
        window.sessionStorage.setItem('name', a)

        // localStorage  用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
        window.localStorage.setItem('name', a)
    }
    document.getElementById("bt2").onclick = function() {

        // 读取存储的sessionStorage（a）
        var a = window.sessionStorage.getItem('name')

        // 读取存储的localStorage（a）
        var a = window.localStorage.getItem('name')
        alert(a)
    }
    document.getElementById("bt3").onclick = function() {
        // 删除localStorage存储的a
        window.localStorage.removeItem('name')
    }