drag1

drag2

drag3

代码如下：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <title>div拖拽到div</title>
  5.     <script src="jquery.js"></script>
  6.     <style type="text/css">
  7.         #div1, #div2, #div3 {
  8.             float: left;
  9.             width: 150px;
  10.             height: 50px;
  11.             margin: 10px;
  12.             padding: 10px;
  13.             border: 1px solid #aaaaaa;
  14.         }
  15.  
  16.         .movefolder {
  17.             background-color: #ccc;
  18.         }
  19.     </style>
  20.     <script type="text/javascript">
  21.         function allowDrop(ev) {
  22.             $("#" + ev.target.id).addClass("movefolder");
  23.             ev.preventDefault();
  24.         }
  25.  
  26.         var dragItemId;
  27.         function drag(ev, obj) {
  28.             dragItemId = obj.id;
  29.             //console.log($("#" + obj.id).attr("class"));
  30.             ev.dataTransfer.setData("Text", ev.target.id);
  31.         }
  32.  
  33.         function drop(ev) {
  34.             var data = ev.dataTransfer.getData("Text");
  35.             console.log(ev.target.id);
  36.             ev.target.appendChild(document.getElementById(data));
  37.  
  38.             $("#" + ev.target.id).removeClass("movefolder");
  39.             ev.preventDefault();
  40.         }
  41.  
  42.         function leaveDrag(ev) {
  43.             $("#" + ev.target.id).removeClass("movefolder");
  44.             console.log(ev.target.id);
  45.         }
  46.  
  47.         $(function () {
  48.  
  49.         });
  50.     </script>
  51. </head>
  52. <body>
  53.     <div style="width: 580px; float: left;">
  54.         <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="leaveDrag(event)"></div>
  55.         <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="leaveDrag(event)"></div>
  56.         <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="leaveDrag(event)"></div>
  57.     </div>
  58.     <div style="width: auto; margin-left: 580px;">
  59.         <br />
  60.         <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>
  61.         <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>
  62.         <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>
  63.     </div>
  64. </body>
  65. </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. 判断浏览器是IE的几种方式

    <script> if(!+[1,])alert("这是ie浏览器"); else alert("这不是ie浏览器"); </script&g ...

  2. Android 相关

    ADT 下载更新 http://www.oschina.net/question/1463998_220998 更改包名后,资源文件不更新 AndroidMainfast.xml文件,有package ...

  3. linux常用的一些命令(不断增加中)

    linux 下重启 apache: httpd -k restart 下面这些大多命令都可以在<鸟哥私房菜>的服务器中的“常用网络指令”和基础中的“程序与资源管理”中找到ps -aux 这 ...

  4. ajax 模仿百度下拉

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 【转】 ASP.NET网站路径中~(波浪线)解释

    刚开始学习ASP.NET的朋友可能会不理解路径中的-符代表什么,例如ImageUrl=”~/Images/SampleImage.jpg” 现在我们看看-代表什么意思.-是ASP.NET 的Web 应 ...

  6. 转】Mahout分步式程序开发 聚类Kmeans

    原博文出自于: http://blog.fens.me/hadoop-mahout-kmeans/ 感谢! Mahout分步式程序开发 聚类Kmeans Hadoop家族系列文章,主要介绍Hadoop ...

  7. Spark的发展历程

    ·2009年:Spark诞生于AMPLab.·2010年:开源.·2013年6月:Apache孵化器项目.·2014年2月:Apache顶级项目.·2014年2月:大数据公司Cloudera宣称加大S ...

  8. Unix 环境高级编程---线程创建、同步、

    一下代码主要实现了linux下线程创建的基本方法,这些都是使用默认属性的.以后有机会再探讨自定义属性的情况.主要是为了练习三种基本的线程同步方法:互斥.读写锁以及条件变量. #include < ...

  9. 数据结构（C语言版）---第三章栈和队列 3.4.2 队列的链式表示和实现（循环队列）

    这个是循环队列的实现,至于串及数组这两章,等有空再看,下面将学习树. 源码如下: #include <stdio.h> #include <stdlib.h> #define ...

  10. 异常处理与MiniDump详解(转)

    一.   综述 总算讲到MiniDump了. Dump有多有用我都无法尽数,基本上属于定位错误修复BUG的倚天剑.(日志可以算是屠龙刀)这些都是对于那些不是必出的BUG,放在外面运行的时候出现的BUG ...