如上图片：

<!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. 前端存储loaclForage

    以前使用本地存储,首先会想到localstorage或者session storage,将要存储的数据转化成字符串后进行setItem操作,但是使用local storage 有几个问题: 1.它是同 ...

  2. fasterxml.jackson 将对象转换为json报错处理

    最近在做查询的数据遇到如下报错: com.fasterxml.jackson.databind.exc.InvalidDefinitionException: No serializer found ...

  3. 《mysql从入门到精通》提高

    第一 游标的使用 delimiter $$ DROP PROCEDURE IF EXISTS product_in_sheet_handler; CREATE PROCEDURE product_in ...

  4. 【Mysql】—— MySQL存储引擎中的MyISAM和InnoDB区别详解

    在使用MySQL的过程中对MyISAM和InnoDB这两个概念存在了些疑问,到底两者引擎有何分别一直是存在我心中的疑问.为了解开这个谜题,搜寻了网络,找到了如下信息: MyISAM是MySQL的默认数 ...

  5. html的表格 table

    創建表格: 每一個表格以table開始: 每一個表格行以tr開始: 每一個數據以td開始:td的內容可以文本.圖像.表格.表單.段落等. 表格邊框: border設置邊框的粗細,但無法設置行間距,也無 ...

  6. BZOJ4445 SCOI2015小凸想跑步（半平面交）

    考虑怎样的点满足条件.设其为(xp,yp),则要满足(x0-xp,y0-yp)×(x1-xp,y1-yp)<=(xi-xp,yi-yp)×(xi+1-xp,yi+1-yp)对任意i成立.拆开式子 ...

  7. Luogu5155 USACO18DEC Balance Beam（概率期望+凸包）

    假设已经求出了在每个点的最优期望收益,显然最优策略是仅当移动一次后的期望收益>当前点收益时移动.对于初始点,其两边各存在一个最近的不满足上述条件的位置,因此从初始点开始随机游走,直到移动到这两个 ...

  8. BZOJ5251 八省联考2018劈配（网络流）

    劈配,匹配,网络流.那么考虑怎么跑网络流. 先看第一问.首先套路的建出超源超汇.不用想也知道导师向汇连容量为战队人数上限的边.特别地,给出局也建一个点,向汇连容量inf的边(似乎没有必要).对于一个新 ...

  9. hdu 6394 Tree （2018 Multi-University Training Contest 7 1009） (树分块+倍增）

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=6394 思路:用dfs序处理下树,在用分块,我们只需要维护当前这个点要跳出这个块需要的步数和他跳出这个块去 ...

  10. Codeforces Round #417 (Div. 2) C. Sagheer and Nubian Market

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...