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. 开源框架DNN简介以及安装

    donetnuke 是一款免费的开源cms框架,目前也有收费版,不过免费版也可以适应大家大部分的需求.我前些阵子是老板让我在20天内,做好一个官网并且发布,并且指定使用dnn这个框架,考虑到又可以学习 ...

  2. git url ssh和https相互切换

    Changing a remote's URL The git remote set-url command changes an existing remote repository URL. Ti ...

  3. JS获得月最后一天和js得到一个月最大天数

    <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title ...

  4. dom 回到顶部(兼容IE FF Chrome)

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

  5. CentOS(RedHat) 6.2 Samba share权限拒绝访问

    在实现<CentOS(RedHat) 6.2下Samba配置>的过程中,发现CentOS 6.2的Samba share总是没有权限写文件,已经试过在Windows XP/Windows  ...

  6. JavaIO（06）文件复制

    文件复制一般是采用两种方式进行操作: 1:将源文件中的内容全部读取到内存中,并一次性的写入到目标文件中:(不常用这种方式) 2:不将源文件中的内容全部读取进来,而是采用边读边写的方式:   实例01: ...

  7. [iOS微博项目 - 2.3] - 用户取消对app的授权

    github: https://github.com/hellovoidworld/HVWWeibo   A.用户取消对app的授权 用户可以在微博网站上取消对某个应用(app)的授权   1.打开& ...

  8. Swift项目兼容Objective-C问题汇总

    Swift项目兼容Objective-C问题汇总 转载自 http://www.cocoachina.com/swift/20150608/12025.html 本文是投稿文章,作者:一叶(博客)欢迎 ...

  9. Codeforces 712 D. Memory and Scores (DP+滚动数组+前缀和优化)

    题目链接:http://codeforces.com/contest/712/problem/D A初始有一个分数a,B初始有一个分数b,有t轮比赛,每次比赛都可以取[-k, k]之间的数,问你最后A ...

  10. 关于JPA封装数据库数据到实体不调用属性的get和set的方法解决办法

    今天发现JPA封装数据库数据到实体并不调用属性的get和set的,郁闷,本来想在set方法做改字段的值处理的谁知道遇到这个情况: @Column(name = acode) @Access(value ...