如上图片：

<!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. Qt__绘制系统

    Qt绘制系统简介 Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制.整个绘图系统基于QPainter,QPainterDevice和QPaintEngine三个类. QPaint ...

  2. 好文章之——PHP系列（一）

    注:最近实习的公司是一家做电商企业,后台主要是php开发,好久不怎么接触php的我看了几篇相关文章,提高下对它的认识与理解,发现里面的学习思路还是非常好的,当然也会重新拾一下基础知识啦! 其实自己心中 ...

  3. poj 2762(强连通分量+拓扑排序)

    题目链接:http://poj.org/problem?id=2762 题意:给出一个有向图,判断任意的两个顶点(u,v)能否从u到达v,或v到达u,即单连通,输出Yes或No. 分析:对于同一个强连 ...

  4. gbk、utf-8、utf8mb4区别

    1. 存储大小(1). GBK编码专门用来解决中文编码的,是双字节的.不论中英文都是双字节的.(2). UTF-8 编码是用以解决国际上字符的一种多字节编码,它对英文使用8位(即一个字节),中文使用2 ...

  5. BZOJ3172[Tjoi2013]单词——AC自动机(fail树)

    题目描述 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. 输入 第一个一个整数N,表示有多少个单词,接下来N行每行一个单词.每个 ...

  6. AISing Programming Contest 2019 翻车记

    A:签到. #include<iostream> #include<cstdio> #include<cstdlib> #include<cmath> ...

  7. HDU4288-STL模拟

    给你插入,删除的操作,维护一个降序排列的表,查询所有下标模5等于3的元素和. 2012年成都网络赛的一道签到题.但是还是搜了题解才做出来了,意志不坚定啊... 这道题给10s的时间,做法多种多样. 最 ...

  8. 概率dp总结 正在更新

    借bin神一句话 概率DP主要用于求解期望.概率等题目. 转移方程有时候比较灵活. 一般求概率是正推,求期望是逆推.通过题目可以体会到这点. 先推公式 多个 -> 一个 明确dp[i]代表什么意 ...

  9. 【Luogu4931】情侣？给我烧了！ 加强版（组合计数）

    [Luogu4931]情侣?给我烧了! 加强版(组合计数) 题面 洛谷 题解 戳这里 忽然发现我自己推的方法是做这题的,也许后面写的那个才是做原题的QwQ. #include<iostream& ...

  10. 牛客练习赛 小D的Lemon 解题报告

    小D的Lemon 题意 已知 \[ g(x)=\left\{\begin{matrix} 1&,x=1\\ \sum_{i=1}^qk_i&,otherwise \end{matrix ...