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() 方法设置被拖数据的数据类型和值。
  • 相关阅读:
    鸟哥私房菜*基础篇(3)
    Java 基于Graphics2D绘制电子收据图片
    微信扫码支付沙盒测试,解决沙盒环境下签名验证失败
    JAVA对象合集,根据条件过滤
    java对象根据字段进行排序
    vue 弹窗调用父窗口函数
    php使用post功能,调用微信推送服务
    JS字符串截取
    关于两个 IQueryable 合并
    bootstrap清除数据源
  • 原文地址:https://www.cnblogs.com/dennyxiao/p/9408288.html
Copyright © 2011-2022 走看看