html5 drag drop

// 生命周期
//dragstart -> drag -> dragenter -> dragover ->  dragleave  -> drop -> //dragend   
//拖拽元素 dragstart ->drag ->dragend
//目标元素 dragenter ->dragover ->drop->dragleave 

// 用户开始拖动元素时触发
    dragstart (item) {
        //ie下 要return true 并且不可阻止默认行为
      return true;
    },    
 // 元素正在拖动时触发
    drag (item) {
       //ie下不可阻止默认行为  而且不需要return
      /*if (event && event.preventDefault) {//如果是FF下执行这个

        event.preventDefault();
      }else{
        window.event.returnValue = false;//如果是IE下执行这个

      }*/
    },
// 用户完成元素拖动后触发
    dragend (item) {
    //ie下要阻止默认行为  并且return false
      if (event && event.preventDefault) {//如果是FF下执行这个

        event.preventDefault();
      }else{
        window.event.returnValue = false;//如果是IE下执行这个

      }
      return false
    },
//没用上
   dragoverHeader () {
      if (event && event.preventDefault) {//如果是FF下执行这个

        event.preventDefault();
      }else{
        window.event.returnValue = false;//如果是IE下执行这个

      }
    },
 // 当被鼠标拖动的对象进入其容器范围内时触发此事件
    dragenter (item) {
     //ie 下 要阻止默认行为 并且return true
      if (event && event.preventDefault) {//如果是FF下执行这个

        event.preventDefault();
      }else{
        window.event.returnValue = false;//如果是IE下执行这个

      }
      return true;
    },
    // 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    dragover (item) {
      //ie 下 要阻止默认行为 并且return true
      if (event && event.preventDefault) {//如果是FF下执行这个

        event.preventDefault();
      }else{
        window.event.returnValue = false;//如果是IE下执行这个

      }
      // 只有当可拖动,而且没有禁用的才执行下面的代码,并且不是自身
      if (this.allowDrag && this.notSelf) {
        // 设置当前的hoverNode
        this.hoverNode = item
      }
      return true;
    },    
 // 在一个拖动过程中，释放鼠标键时触发此事件
    drop (item) {
      //ie下要阻止默认行为
      if (event && event.preventDefault) {//如果是FF下执行这个

        event.preventDefault();
      }else{
        window.event.returnValue = false;//如果是IE下执行这个

      }
   
    },    

 

转载于:https://www.cnblogs.com/Webyangbowen/p/10030441.html