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));
    }

    })();
  • 相关阅读:
    选择排序
    冒泡排序
    排序算法
    排序的稳定性
    散列表查找的代码实现
    处理散列冲突的方法
    jQuery 实时监听input
    PhpStorm
    Memcache 学习
    豆瓣第三方登录
  • 原文地址:https://www.cnblogs.com/zyhh/p/7131541.html
Copyright © 2011-2022 走看看