zoukankan      html  css  js  c++  java
  • js拖拽效果

    HTML文件

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    #div{
    514px;
    height: 345px;
    margin: 0 auto;
    border: 4px solid #aaa;
    padding: 20px;
    }
    img{
    padding: 1px;
    border: 1px solid #4A4D4A;
    }
    </style>
    </head>
    <body>

    <div id="div"></div>
    <br><br><br>
    <img src="img/4.jpg" id="img4">
    <img src="img/5.jpg" id="img5">
    <img src="img/6.jpg" id="img6">
    <img src="img/7.jpg" id="img7">

    <script type="text/javascript">
    //获取所有的img
    var img = document.getElementsByTagName('img');
    for(var i = 0; i < img.length; i++){
    img[i].ondragstart = function(){
    //拖拽数据传递对象
    event.dataTransfer.setData('text',event.target.id);
    }
    }
    //获取div
    var div = document.getElementById('div');
    //取消浏览器的拖拽效果
    div.ondragover = function(){
    event.preventDefault();
    }
    //拖拽
    div.ondrop = function(){
    //接受发送过来的img ID
    var id = event.dataTransfer.getData('text');
    var img = document.getElementById(id);
    //添加子节点
    div.appendChild(img);
    }
    </script>
    </body>
    </html>


    效果预览:

    
    
  • 相关阅读:
    作用域面试题
    js··BOM 浏览器对象模型
    js···DOM2动态创建节点
    js ·节点的知识点
    js·逻辑运算
    js···元素的属性
    什么是函数封装。
    hive 历史拉链表的处理
    [转]实现Hive数据同步更新的shell脚本
    python 3 过滤股票
  • 原文地址:https://www.cnblogs.com/houjiie/p/7149461.html
Copyright © 2011-2022 走看看