如上图片：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>可拖拽的元素组件</title>

    <style>

        #d1 {width:800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;}

        #d2 {width:800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;}

    </style>

</head>

<body>

    <div id="d1">

      <img id="myimg" src="https://www.baidu.com/img/baidu_jgylogo3.gif" />

    </div>

   <div id="d2"></div>

   <script>

   //获取图片及两个div元素

    var d1 = document.getElementById("d1"),

        myimg = document.getElementById("myimg"),

        d2 = document.getElementById("d2");

    //给图片绑定dragstart事件

    myimg.addEventListener("dragstart",MyDragStart);

    //给第二个div绑定dragover,drop两个事件

    d2.addEventListener("dragover",MyDragover);

    d2.addEventListener("drop",MyDrop);

    //给第一个div绑定dragover,drop两个事件

    d1.addEventListener("dragover",MyDragover);

    d1.addEventListener("drop",MyDrop);

    //图片开始拖拽事件的处理函数

    function MyDragStart(event){

        var mydata = myimg.id;//保存ID值

        var trans = event.dataTransfer;

        trans.setData("text",mydata);

    }

    //该处理函数是为阻止页面的默认行为

    function MyDragover(){

        event.preventDefault();

    }

    //drop处理函数

    function MyDrop(event){

        //

        var trans = event.dataTransfer;//获取数据保存对象

        var mysrc = trans.getData("text");//图片id

        var ele = document.getElementById(mysrc);//获取到图片对象

        if (ele != event.srcElement)//判断图片是否移动

        {

            event.srcElement.appendChild(ele.parentNode.removeChild(ele));//将img元素剪切到目标div中

        }

        trans.clearData("text");//清除数据

    }

    </script>

</body>

</html>

W3CSHOOL:

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

#div1, #div2

{float:left; width:198px; height:66px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

</style>

<script type="text/javascript">

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

  <img src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" id="drag1" />

</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

H5 JQUERY：

<!DOCTYPE html>

<html lang>

<head>

<meta charset="UTF-8">

<title>H5-tuozuai</title>

<script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<style>

.dd {}

.dd li{display:inline-block; padding:5px; margin:5px; border:1px solid red; text-align:center; cursor:move;}

.dd li img {display:block;}

.dd_over li {min-height:200px; margin:15px; border:1px dashed #ddd;}

</style>

</head>

<body>

    <ul class="dd">

        <li><img src="https://www.baidu.com/img/baidu_jgylogo3.gif">abc</li>

        <li><img src="https://www.baidu.com/img/baidu_jgylogo3.gif"></li>

        <li><img src="https://www.baidu.com/img/baidu_jgylogo3.gif"></li>

    </ul>

    <ul class="dd_over">

        <li></li>

        <li></li>

        <li></li>

    </ul>

    <script>

        var dd = $(".dd li");

        var dd_over = $(".dd_over li");

        //把被拖动的元素进行循环，并进行setData

        dd.each(function(index,val){

        　　val.ondragstart = function(event){//拖拽刚开始时

        　　        event.dataTransfer.setData("key", $(val).html());//用key作为被移动的数据

              console.log("start begin");

          };

        });

        //设置DIV可接收

        dd_over.each(function(index,val){

            val.ondragover = function(event){

                event.preventDefault();

                console.log("o");

            };

        });

        // 将被拖动元素放入DIV

        dd_over.each(function(index,val){

            val.ondrop = function(event){

                var key = event.dataTransfer.getData("key");

                var html = $("<span style='border:solid 1px #f60; padding:5px; margin:5px;'>"+key+"</span>")

                //var html = $("<span style='border:solid 1px #f60; padding:5px; margin:5px;'>aa</span>")

                $(this).append(html);

                console.log("stop" + index);

            };

        });

    </script>

</body>

</html>

demo如图：

http://www.cnblogs.com/Medeor/p/4963321.html

拖拽插件的话，如下：jquery.event.drag

http://threedubmedia.com/code/event/drop#demos

HTML5 元素拖拽实现 及 jquery.event.drag插件的更多相关文章

  1. HTML5元素拖拽实现示例

    HTML5现在前端圈中,已然成为一个不那么新的技术词汇了,很多公司也把HTML5也当成了硬性的技能要求,但是很多前端恐怕都不了解HTML5的拖拽怎么实现吧. 看了下极客学院的视频,大概的了解了下思路. ...

  2. html5简单拖拽实现自动左右贴边+幸运大转盘

    此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...

  3. 【转】C#.net拖拽实现获得文件路径

    C#.net拖拽实现获得文件路径 作者Attilax ,  EMAIL:1466519819@qq.com 思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等), ...

  4. 【WPF】一些拖拽实现方法的总结（Window，UserControl）

    原文:[WPF]一些拖拽实现方法的总结(Window,UserControl) 原文地址 https://www.cnblogs.com/younShieh/p/10811456.html 前文 本文 ...

  5. selenium操作拖拽实现无效果的替代方案

    如果碰到这种情况,无论你是直接通过draganddrop()还是分步执行clickandhold(),dragtoelement(),或通过by_offset位移都无法实现元素拖拽.只能物理模拟了 w ...

  6. android自定义控件(2)-拖拽实现开关切换

    在这里,我们的主要工作就是在原有代码的基础上,增加一个重写的onTouchEvent方法,刚添加上来的时候是这个样子的: @Override public boolean onTouchEvent(M ...

  7. C#.net拖拽实现获得文件路径

    思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等),  在DragDrop事件中对“信息”进行解析.        窗体的AllowDrop属性必须设置成tru ...

  8. Silverlight中的拖拽实现的图片上传

    原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接 ...

  9. WPF ListView 简单的拖拽实现(转)

    首先设置ListView的AllowDrop=True:SelectionMode=Extended;并且ListView视图为GridVIew. private void listView1_Mou ...

随机推荐

  1. (转)vmware下给linux虚拟机扩容

    “Well, here’s another fine mess you’ve gotten me into” Let us pretend that you have an Ubuntu Server ...

  2. idea编译器光标变为insert状态

    idea鼠标变成inset状态,不能复制.粘贴使用快捷键 1.打开设置 点击 plugins 输入ideavim  把 这个勾去掉!这个是插件的配置问题. 2.如果上面的不管用,那么检查editor- ...

  3. js函數

    函數是什麼?函數就是被事件驅動或者調用執行的可重複的代碼塊. 函數聲明: 使用關鍵詞function,關鍵詞function大小敏感. function a{代碼塊} 局部變量: 在函數內部聲明的變量 ...

  4. Rob Pike 编程五原则

    Rob Pike's 5 Rules of Programming Rule 1: You can't tell where a program is going to spend its time. ...

  5. Scala常用命令

    :q    退出控制台 控制台换行    空格 + 回车

  6. BZOJ3505 CQOI2014数三角形（组合数学）

    显然可以用总方案数减掉三点共线的情况.对于三点共线,一个暴力的做法是枚举起点终点,其间整点数量即为横纵坐标差的gcd-1.这样显然会T,注意到起点终点所形成的线段在哪个位置是没有区别的,于是枚举线段算 ...

  7. mycat实现简单的mysql集群负载均衡

    什么是mycat呢? 简单理解为一个MySQL中间件,它支持分流.基于心跳的自动故障切换,支持读写分离,支持mysql主从,基于Nio管理线程的高并发… 详见官网:http://www.mycat.i ...

  8. ORMLite学习入门笔记

    ORMLite学习入门笔记 使用原始的SQLiteHelper来操作维护数据库有点过于繁琐,重复工作量较大.所以会想到使用一个比较方便的ORM来维护我们本地的数据库,各位业界前辈都给我推荐了ORMLi ...

  9. IntelliJ IDEA的使用操作链接

    一:IntelliJ IDEA导入多个eclipse项目到同一个workspace下: http://www.cnblogs.com/ThinkVenus/p/6783961.html?utm_sou ...

  10. mysql数据库user表host字段的%问题

    搜索: mysql数据库user表host字段的%问题 连接:http://blog.csdn.net/xiaomengh/article/details/48706149 在mysql数据库中,使用 ...