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. Windows Azure Platform 系列文章目录

    Windows Azure Platform (一) 云计算的出现 Windows Azure Platform (二) 云计算的分类和服务层次 Windows Azure Platform (三) ...

  2. 【转】MySQL索引和查询优化

    原文链接:http://www.cnblogs.com/mailingfeng/archive/2012/09/26/2704344.html 对于任何DBMS,索引都是进行优化的最主要的因素.对于少 ...

  3. 三、 将DataTable 转换为List

    1. 方法public static IList<T> ConvertTo<T>(DataTable table) { if (table == null) { return ...

  4. Hadoop学习笔记(2)

    Hadoop学习笔记(2) ——解读Hello World 上一章中,我们把hadoop下载.安装.运行起来,最后还执行了一个Hello world程序,看到了结果.现在我们就来解读一下这个Hello ...

  5. HDu 1001 Sum Problem 分类： ACM 2015-06-19 23:38 12人阅读 评论(0) 收藏

    Sum Problem Time Limit: 1000/500 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  6. Python基础 初识Python

    机器码 机器码(machine code),学名机器语言指令,有时也被称为原生码(Native Code),是电脑的CPU可直接解读的数据. 通常意义上来理解的话,机器码就是计算机可以直接执行,并且执 ...

  7. 检测iOS的APP性能的一些方法

    首先如果遇到应用卡顿或者因为内存占用过多时一般使用Instruments里的来进行检测.但对于复杂情况可能就需要用到子线程监控主线程的方式来了,下面我对这些方法做些介绍: Time Profiler ...

  8. GC: 垃圾回收算法

    标记-清除算法标记-清除(Mark-Sweep)算法是最基础的算法,就如它的名字一样,算法分为“标记”和“清除”两个阶段:首先标记出所有需要回收的对象,在标记完成后统一回收掉所有被标记的对象.之所以说 ...

  9. VSTO安装部署(完美解决XP+2007)

    从开始写VSTO的插件开始,安装部署一直就是一个很大的难题,其实难题的原因主要是针对XP+2007而言.在Win7上,由于基本上都预装了.net framework,所以安装起来其实问题不大. 主要需 ...

  10. Domino 迁移到Exchange 服务器 之在Domino Server 创建用户！

    我们打开Lotus Admin,导航到注册,点击到需要设置的人,然后再选择验证者标识符选择相应的组织配置标识符: