h5拖动drag

解释了什么是源对象和目标对象后，回归前端中的拖拽API，由上面的操作我们可以得出几个函数

被拖动的源对象可以触发的事件：

(1)ondragstart：源对象开始被拖动

(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend：源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件：

(1)ondragenter：目标对象被源对象拖动着进入

(2)ondragover：目标对象被源对象拖动着悬停在上方

(3)ondragleave：源对象拖动着离开了目标对象

(4)ondrop：源对象拖动着在目标对象上方释放/松手 拖拽API总共就是7个函数！！

 function init() {

            var source = document.getElementById(“dragme”);

            var dest = document.getElementById(“text”);

            //(1)拖放开始

            source.addEventListener(“dragstart”,function(ev) {

                //向dataTransfer对象追加数据

                var dt = ev.dataTransfer;

                dt.effectAllowed = ‘all’;

                //(2)拖放元素为dt.setData(“text/plain”,this.id);

                dt.setData(“text/plain”,”你好”);

            },false);

            //(3)dragend:拖放结束

            dest.addEventListener(“dragend”,function(ev) {

                //不执行默认操作

                ev.preventDefault();

            },false);

            //(4)drop:被拖放

            dest.addEventListener(“drop”,function(ev) {

            //从DataTransfer对象那里取得数据

                var dt = ev.dataTransfer;

                var text = dt.getData(“text/plain”);

                dest.textContent += text;

                //(5)不执行默认操作

                ev.preventDefault();

                //停止事件传播

                ev.stopPropagation();

                },false);

            },

   document.ondragover = function(e) {e.preventDefault();};

   document.ondrop = function(e){e.preventDefault();};