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下执行这个
    
          }
       
        },    
    学习是对自己负责,自己是职业发展的负责人!
  • 相关阅读:
    jQuery实现鼠标点击Div区域外隐藏Div
    JS判断输入值为正整数
    trim()不兼容ie的问题及解决方法
    傻问题就用傻办法:解决问题有时候不需要探究根源,依据表象就能直接解决
    /vendor/lib64/libOpenCL.so在安卓应用中无访问权限的解决办法
    复数域上的人工神经网络与量子计算
    中国移动CMCC家庭路由器的默认登陆账号
    717. 1-bit and 2-bit Characters
    219. Contains Duplicate II
    1346. Check If N and Its Double Exist
  • 原文地址:https://www.cnblogs.com/Webyangbowen/p/10030441.html
Copyright © 2011-2022 走看看