drag1

drag2

drag3

代码如下：

<!DOCTYPE HTML>

<html>

<head>

    <title>div拖拽到div</title>

    <script src="jquery.js"></script>

    <style type="text/css">

        #div1, #div2, #div3 {

            float: left;

            width: 150px;

            height: 50px;

            margin: 10px;

            padding: 10px;

            border: 1px solid #aaaaaa;

        }

        .movefolder {

            background-color: #ccc;

        }

    </style>

    <script type="text/javascript">

        function allowDrop(ev) {

            $("#" + ev.target.id).addClass("movefolder");

            ev.preventDefault();

        }

        var dragItemId;

        function drag(ev, obj) {

            dragItemId = obj.id;

            //console.log($("#" + obj.id).attr("class"));

            ev.dataTransfer.setData("Text", ev.target.id);

        }

        function drop(ev) {

            var data = ev.dataTransfer.getData("Text");

            console.log(ev.target.id);

            ev.target.appendChild(document.getElementById(data));

            $("#" + ev.target.id).removeClass("movefolder");

            ev.preventDefault();

        }

        function leaveDrag(ev) {

            $("#" + ev.target.id).removeClass("movefolder");

            console.log(ev.target.id);

        }

        $(function () {

        });

    </script>

</head>

<body>

    <div style="width: 580px; float: left;">

        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="leaveDrag(event)"></div>

        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="leaveDrag(event)"></div>

        <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="leaveDrag(event)"></div>

    </div>

    <div style="width: auto; margin-left: 580px;">

        <br />

        <div class="test" draggable="true" ondragstart="drag(event,this)" id="dragdiv1" style="background-color: red; height: 40px; width: 40px; float: left; margin: 5px; cursor: pointer;"></div>

        <div class="test" draggable="true" ondragstart="drag(event,this)" id="dragdiv2" style="background-color: green; height: 40px; width: 40px; float: left; margin: 5px; cursor: pointer;"></div>

        <div class="test" draggable="true" ondragstart="drag(event,this)" id="dragdiv3" style="background-color: blue; height: 40px; width: 40px; float: left; margin: 5px; cursor: pointer;"></div>

    </div>

</body>

</html>

代码下载

简单的div元素拖拽到div的更多相关文章

  1. 拖拽改变div的大小

    拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  2. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  3. 可以随鼠标拖拽的div

    可以拖拽的div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  4. 拖拽调整Div大小

    今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. (function ($) { $.fn.dragDivResize = function () { var delta ...

  5. JS实现多Div模块拖拽功能

    空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...

  6. jQuery网页元素拖拽插件

    效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...

  7. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  8. VUE 元素拖拽、移动

    元素拖拽 作者:一粒尘土 时间:2019-10-30 使用范围:两个元素位置交换,移动元素到指定位置 涉及函数 属性 解释 draggable 是否允许元素进行拖拽 dragstart 拖拽开始触发的 ...

  9. html5的元素拖拽

    今天学习了妙味课堂的课程: 在html5中有支持元素拖拽的一些属性和方法: 一些实例代码如下: <div id="div1"></div> <ul&g ...

随机推荐

  1. Juniti学习总结

    JUnit简介 JUnit是由 Erich Gamma和Kent Beck编写的一个回归测试框架(regression testing framework).JUnit测试是程序员测试,即所谓白盒测试 ...

  2. bundle install rake-10.4.2

    这个是由于被墙了的原因,提供一个不用FQ解决的方法 淘宝做了一个gem镜像,地址是http://ruby.taobao.org/  为什么有这个? 由于国内网络原因(你懂的),导致 rubygems. ...

  3. 关于WordPress建站的原理二三事

    在写关于仿站文章详情页如何制作之前,我觉得有必要就一些原理性的问题,做一些说明.文章详情页的核心模块和首页有很多相似的地方,比如调用文章的标题.文章的内容.文章分类.作者等,实现起来都差不多,因此,了 ...

  4. MySql数据备份与恢复小结

    方法1 备份 .sql" FROM 表名; 恢复 .sql" INTO TABLE 表名; 补充几个设置 1. FIELDS TERMINATED BY ',' #字段间隔符2. ...

  5. Azure中的分布式1——多实例

    Azure中的WebRole和WorkerRole天然支持负载均衡,只需要简单配置一下即可,下面我以一个WebRole为例说明这一点. 创建一个项目类型为MVC4的WebRole 项目结构如下: 右键 ...

  6. SvUDID实现设备唯一标示

    //SvUDIDTools : https://github.com/smileEvday/SvUDID //将生成的UDID保存到钥匙串中,用户卸载app再重新安装UDID也不会改变. /* 用法1 ...

  7. Node-APN 开源推送服务

    Node-APN是一个开放的结合了苹果推送通知的Node.js模块,该源码模块使用简单,反馈服务支持.错误处理,在发送出错时自动重发.遵从苹果的最佳实践. Node-APN(github)

  8. linux 下查找大于100M的文件

    命令行如下 find . -type f -size +100M Linux系统下查找大文件或目录的技巧 当硬盘空间不够时,我们就很关心哪些目录或文件比较大,看看能否干掉一些了,怎么才能知道呢?以易读 ...

  9. php连接mysql配置

    php连接mysql测试代码: <?php $link=mysql_connect('localhost','root','123456'); if(!$link) echo "失败! ...

  10. leetcode：Path Sum （路径之和） 【面试算法题】

    题目: Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up ...