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. Mysql报错：1172 - Result consisted of more than one row

    执行mysql函数时报错:1172 - Result consisted of more than one row 函数语句中select into语句中WHERE account = userNam ...

  2. Flex之自定义事件

    1.通过dispatchEvent委托事件模式完成自定义事件: <?xml version="1.0" encoding="utf-8"?> < ...

  3. Windows Azure 虚拟网络配置(Site to Site)

    上篇我们创建了Point to Site的虚拟网络连接,来满足客户端到云端网络的连接.本篇文章我们将创建Site to Site的虚拟网络连接,以满足本地网络到云端的网络连接. 创建与配置过程与上篇较 ...

  4. Axis2与Web项目整合

    一.说明: 上一篇介绍了通过使用Axis2来发布和调用WebService,但是是把WebService发布在Axis2提供的项目中,如果我们需要在自己的Web项目中来使用Axis2发布WebServ ...

  5. Codeforces Round #367 (Div. 2) D. Vasiliy's Multiset （0/1-Trie树）

    Vasiliy's Multiset 题目链接: http://codeforces.com/contest/706/problem/D Description Author has gone out ...

  6. C++11静态assert

    [C++11静态assert] C++11新的关键字static_assert可以解决模板中的状态检察. 声明采取以下的形式: 这里有一些如何使用static_assert的例子: 当常数表达式值为f ...

  7. 理解js闭包（二）

    @(编程) 一.什么是闭包? 官方"的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 相信很少有人能直接看懂这句话,因为他 ...

  8. 关于PCB 3D 模型的快速导入方法

    altium designer中创建的3D library 只能查看3D效果,并没有其他功能,经测试在原理图编辑界面通过给元件添加 PCB 3D 并不能真正添加3D模型,这样添加根本没有效果(显示不出 ...

  9. hdu 2199 Can you solve this equation?(高精度二分）

    http://acm.hdu.edu.cn/howproblem.php?pid=2199 Can you solve this equation? Time Limit: 2000/1000 MS ...

  10. ThinkPHP C+F方式

    ThinkPHP常用C+F方法进行配置设置于缓存设置 比如常见的 C(F('smtp'),'smtp');表示获取F方法中smtp缓存,设置配置为smtp函数 C方法是ThinkPHP用于设置.获取, ...