zoukankan      html  css  js  c++  java
  • 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下执行这个
    
          }
       
        },    
    学习是对自己负责,自己是职业发展的负责人!
  • 相关阅读:
    【CV论文阅读】Detecting events and key actors in multi-person videos
    2020意大利数学奥林匹克 第6题
    2020最终数学杯 初级组第3题
    地球上的最短距离
    钱学森做过的趣题
    第35届IMO预选题(瑞典提供)
    第55届IMO 第2题
    第四十届(1999年)IMO 第3题(白俄罗斯供题)
    2019年多瑙河数学竞赛(高中组) 第三题
    2020环球城市春季赛 O级别 高级组 第2题
  • 原文地址:https://www.cnblogs.com/Webyangbowen/p/10030441.html
Copyright © 2011-2022 走看看