如上图片：

<!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. scope 前缀开头的方法

    https://learnku.com/docs/laravel/5.6/eloquent/1403 本地范围 本地范围允许定义通用的约束集合以便在应用中复用. 例如, 你可能经常需要获取「受欢迎的」 ...

  2. hive存储、数据模型、内部表

    创建内部表 加一列元素 删除表

  3. hive 远程管理

  4. Java之JSON操作（gson）

    使用gson包操作JSON数据. 依赖包:gson-2.8.2.jar <dependency> <groupId>com.google.code.gson</group ...

  5. 【转】CNN卷积神经网络_ GoogLeNet 之 Inception(V1-V4)

    http://blog.csdn.net/diamonjoy_zone/article/details/70576775 参考: 1. Inception[V1]: Going Deeper with ...

  6. BZOJ2724 [Violet]蒲公英（分块）

    区间众数.分块,预处理任意两块间所有数的众数,和每块中所有数的出现次数的前缀和.查询时对不是整块的部分暴力,显然只有这里出现的数可能更新答案.于是可以优美地做到O(n√n). #include< ...

  7. itexpdf同一个段落不同文字，如何设置不同的格式

    Java使用itexpdf生成PDF,正常情况下,新建一个段落Paragraph,然后可以给段落添加一个格式BaseFont Paragraph paragraphBlue = new Paragra ...

  8. 【HDU5778】abs（数学）

    BUPT2017 wintertraining(16) #4 C HDU - 5778 题意 给定x,找出使|y-x|最小,且每个质因子都出现两次的y(\(y\le 2\))50组测试数据,\(1\l ...

  9. SharePoint 2013 APP 开发示例 （三）使用远程的web资源

    在这个示例里我们将详细介绍 TokenHelper 类, 我们将看到它是怎么简单地从远程web站点访问SharePoint的.我们还将取到它的一些值.这将帮助我们理解连接是怎么被构造的,同时也方便我们 ...

  10. 【转】安全加密（三）：RFID标签防伪为生活开启安全模式

    本文导读 随着RFID技术的快速发展和RFID电子标签的生产成本不断降低,RFID标签防伪技术的应用也得到了极大的普及,逐步出现在各行各业当中,如交通出行.票务安全.商品防伪等领域. RFID技术简介 ...