zoukankan      html  css  js  c++  java
  • HTML5 拖动div盒子更换元素内容

    拖动下面任意一张照骗跟你想换的照骗的位置进行更换,拖动到相应位置即可(可参考w3cschool:html5拖放 )

    拖动后效果

    主要就是在被拖动的盒子上和js里面做文章
    <div style="" class="de_image" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
      
      <img id="image1" src="/images/false.jpg" class="fal" alt="" style=" 20px;height: 20px;">
    </div>
    <!--拖动照片换位置-->
    <script type="text/javascript">
    function allowDrop(ev) {
    ev.preventDefault();
    }

    var srcdiv = null;
    function drag(ev,divdom) {
    srcdiv=divdom;
    ev.dataTransfer.setData("text/html",divdom.innerHTML);
    }

    function drop(ev,divdom) {
    ev.preventDefault();
    if(srcdiv != divdom){
    srcdiv.innerHTML = divdom.innerHTML;
    divdom.innerHTML=ev.dataTransfer.getData("text/html");
    }
    }
    </script>
    对于上面所用到的函数进行解释:
    1. ondrop: 当放置被拖数据时,会发生 drop 事件,这里自定义drop(event,this)函数,互换两个的innerHTML
    2. ondragover:当拖动链接等有默认事件的元素时,要在ondragover事件中用ev.preventDefault()阻止默认事件。否则drop事件不会触发。
    3. draggable:允许拖动。
    4. ondragstart:规定当元素被拖动时,会发生什么。在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值。
  • 相关阅读:
    thinkPHP入门之二
    thinkPHP入门
    斐波那契数列,冒泡排序,选择排序,数组去重
    jquery-懒加载插件
    本地存储之cookie
    javascript的快速排序法
    [luogu2165 AHOI2009] 飞行棋 (枚举)
    [luogu2576 SCOI2010] 幸运数字 (容斥原理)
    [luogu2587 ZJOI2008] 泡泡堂 (贪心)
    [luogu2602 ZJOI2010] 数字计数 (数位dp)
  • 原文地址:https://www.cnblogs.com/dennyxiao/p/9408288.html
Copyright © 2011-2022 走看看