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. Hybrid App简介

    Hybrid App 是混合模式应用的简称,兼具 Native App 和 Web App 两种模式应用的优势,开发成本低,拥有Web技术跨平台特性.目前大家所知道的基于中间件的移动开发框架都是采用的 ...

  2. Linux_搜文件

    Linux 下搜文件, 通常先用 whereis 或 locate ,如果找不到,才以 find 搜寻!因为 whereis 与 locate 是利用数据库来搜寻数据,省时间! <<鸟哥的 ...

  3. 第二百二十九天 how can I 坚持

    百度-让人更容易的获取信息,腾讯-让人更方便的交流,阿里-让人更方便的消费,每个公司都有自己的使命,每个公司的使命都是围绕着人. 创新-其实应该是在每个人的内心深处都或多或少有一些新的想法,但是什么是 ...

  4. Extjs4.2纯前台导出Excel总结

    前段时间做了两个项目,用到了Extjs4.2纯前台导出Excel,遇到很多的问题,从网上也找了很多资料,在这里总结一下,做一个记录: 使用方法: 1.下载extexcel文件包,这里可以下载http: ...

  5. HDU 4493 Tutor （控制精度）

    题意:给定12个数,求平均数. 析:这个题就是精度控制问题,如果控制精度,最好的办法就是用整型了. 代码如下: #include <cstdio> #include <string& ...

  6. sql reiserror 输出错误

    其语法如下: RAISERROR ( { msg_id | msg_str | @local_variable }                    { ,severity ,state }    ...

  7. Framewrok损坏导致卸载不了的解决办法

    1 使用微软自己提供的卸载软件 msicuu2.exe 卸载所有Framework安装版本和更新信息 2 卸载成功后,最好重启一下电脑,然后,从低版本到高版本,安装framewrok,当然,这个按照个 ...

  8. 3DSlicer源代码编译过程vs2008+windows xp [转]

    一 下载QT源代码编译 1.  简述   在 Windows2000/xp/vista 下,安装 VS2008, QT 4.7.2 :并在 VS2008上建立 QT 的集成开发环境,利用 VS2008 ...

  9. 剖析SSH核心原理（一）

      在我前面的文章中,也试图总结过SSH,见 http://blog.csdn.net/shan9liang/article/details/8803989 ,随着知识的积累,总感觉以前说得比较笼统, ...

  10. 【WebForm】ASP.NET 使用 uploadify 上传文件

    说明 ASP.NET中上传文件是很常见的一项功能,经常不用的话,可能会遗忘,为了,以后能方便的调用使用,在这里做个备份说明.最后,把做的简单的DEMO上传,方便看. 主要借鉴的这个博主的: Uploa ...