zoukankan      html  css  js  c++  java
  • H5 实现div拖放位置互换

    1 给要进行拖拽的div加上draggable="true" ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)"三个属性

    <!-- 图表容器 -->
        <div id="echarts_container">
            <div draggable="true" ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)">
                <div id="chart1"></div>
            </div>
            <div draggable="true" ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)">
                <div id="chart2"></div>
            </div>
            <div draggable="true" ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)">
                <div id="chart3"></div>
            </div>
            <div draggable="true" ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)">
                <div id="chart4"></div>
            </div>
            <div draggable="true" ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)">
                <div id="chart5"></div>
            </div>
        </div>
    

    2.放下div时,交换两个div的内容innerHTML

    var srcdiv = null;
    var temp = null;
    
    //当拖动时触发
    function drag(ev, divdom) {
        srcdiv = divdom;
        temp = divdom.innerHTML;
    }
    
    function allowDrop(ev) {
        ev.preventDefault();
    }
    //当放下后触发
    function drop(ev, divdom) {
        ev.preventDefault();
        if (srcdiv !== divdom) {
            srcdiv.innerHTML = divdom.innerHTML;
            divdom.innerHTML = temp;
        }
    
        //假如div里面时echarts图表
        $('div').removeAttr('_echarts_instance_')
    }
    
  • 相关阅读:
    异常
    C++中的mutable,volatile,explicit关键字
    Vi配置文件--Vimrc
    结构体和类的区别
    [转]恢复视力的方法(500度以下)
    与struct相关的宏定义 ---今Tencent笔试用到的
    如何在C++中调用C的代码
    C中如何调用C++函数?
    技术博走起
    Shell常见命令实践
  • 原文地址:https://www.cnblogs.com/shemingxin/p/13519799.html
Copyright © 2011-2022 走看看