如上图片：

<!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. pandas取值

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/5/24 15:03 # @Author : zhang chao # @Fi ...

  2. 如何为TreeView定义三层模板并实现数据绑定

    一直以来都想对TreeView定义多层模板,并实现数据绑定做一个总结,今天在这里做一个概述,我们常用的两层的TreeView绑定的话,我们首先修改TreeView的模板,这里我们使用的是级联的数据模板 ...

  3. BZOJ2157旅游——树链剖分+线段树

    题目描述 Ray 乐忠于旅游,这次他来到了T 城.T 城是一个水上城市,一共有 N 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了节约成本,T 城的任意两个景点之间有且只有一条路 ...

  4. 自学Linux Shell19.1-gawk程序基础特性

    点击返回 自学Linux命令行与Shell脚本之路 19.1-gawk程序基础特性 linux世界中最广泛使用的两个命令行编辑器: sed gawk 1. gawk概念 awk是一个强大的文本分析工具 ...

  5. GDB最常用的命令

    为了调试我的指针LCT--我学会了如何使用gdb! 粘一个常用命令表(原文地址:https://blog.csdn.net/tzshlyt/article/details/53668885) gcc ...

  6. HGOI 20190218 题解

    /* 又是AK局... hjc又双叒叕AK了... Hmmm...我侥幸 */ Problem A card 给出无序序列a[]可以选择一个数插入到合适的位置作为一次操作,至少多少次操作后可以把序列变 ...

  7. 小trick总结

    一个圆上的整点数量不会很多.(Cf AIM TR 5 F) 二分图完美匹配求字典序最小的方案:先一遍匈牙利求出任意一组完美匹配.再跑一遍逐位确定,要求不能修改编号比它小的匹配.(LG 4100) 如果 ...

  8. 洛谷 P3237 [HNOI2014]米特运输 解题报告

    P3237 [HNOI2014]米特运输 题目描述 米特是\(D\)星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储存一直是一个大问题. \(D\)星上有 ...

  9. Linux磁盘和文件系统简介

    Linux磁盘和文件系统简介 1.文件系统:存储设备上存储数据的方式方法 磁盘主要由盘片.机械手臂.磁头和主轴马达组成,而数据的写入实际是写在盘片上,磁盘的最小存储单位为扇区,每个扇区为512字节,扇 ...

  10. bzoj5281/luogu4377 Talent Show (01分数规划+背包dp)

    就是01分数规划的思路,只不过当把w[i]-r*t[i]>0的选完以后如果w值还没达到要求,那就再01背包dp一下就好了(dp时w值>W的时候就存在W里就不会爆内存了). (跑得很慢..大 ...