zoukankan      html  css  js  c++  java
  • 拖拽的效果 第一步 设置 可拖拽的属性 draggable="true" 绑定drag 事件 第二步 设置 放置位置 触发的事件 dragover 第三步 设置 放置之后 触发的事件 dragover 下面请看代码:

    (function(){
    /*-------节点--------*/
    var myimg = document.getElementById('myimg');
    var dropBox = document.getElementById('dropBox');

    /*-------事件绑定--------*/
    myimg.ondragstart = drag;
    dropBox.ondragover = dragover;
    dropBox.ondrop = drop;

    /*-------函数--------*/
    function drag(ev){
    //通过ondragstart事件去存储 当前节点的 id 到 ev.dataTransfer 里面
    ev.dataTransfer.setData('Text',ev.target.id);
    console.log('拖拽的开始');
    }

    function dragover(){
    console.log('hhh');
    //***** 注意:添加一个默认事件的取消 使得drop生效!!!
    event.preventDefault();
    }

    function drop(ev){
    var data = ev.dataTransfer.getData('Text');
    ev.target.appendChild(document.getElementById(data));
    }

    })();
  • 相关阅读:
    第一阶段-意见评论
    团队冲刺第15天
    团队冲刺第14天
    第十三周进度报告
    团队冲刺第13天
    团队冲刺第12天
    团队冲刺第11天
    SCRUM第二阶段第九天
    SCRUM第二阶段第八天
    SCRUM第二阶段第七天
  • 原文地址:https://www.cnblogs.com/zyhh/p/7131541.html
Copyright © 2011-2022 走看看