关键词：
最近有一个项目，需要做一个页面效果，就是将页面中的图片元素拖拽到指定的位置并进行保存，页面加载后自动载人上次拖拽的位置（比如页面中有一医院的平面简图，现在想把某一温度传感器设备的简图放到指定的房间），开始的时候想用Flex或者Flash做，可惜这两个都不会，在网上找了几个实现拖拽的例子，终于可以拖拽图片啦，但是在与数据库交互时，如何存储并再次显示图片的坐标犯了难。
这两天在看HTML5，发现HTML5可以直接实现拖拽，这样相比Flash，既不需要插件支持，也不需要在于数据库交互时发生问题。
这是在W3School上看到的实现拖拽的教程 点击打开链接
这是W3School上面可运行的例子 拖拽例子
上面的例子实现的是在两个<div>中实现拖拽图片，其实实现拖拽效果只需要以下几步：
1. 设置被拖拽元素属性为可拖放，draggable = "true"
2. 设置拖动时响应的事件，即拖动时元素效果，ondragstart = "drag(event)" ，下面的函数dataTransfer.setData设置拖拽元素的数据类型和值
function drag(ev)
ev.dataTransfer.setData("Text",ev.target.id);
3. 设置div允许其他元素放到上面，οndragοver="allowDrop(event)"
function allowDrop(ev)
ev.preventDefault();
4. 设置元素放到div上的响应事件，οndrοp="drop(event)"
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
其实就是把元素设置成div的子元素
下面是完整的代码：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
float:left; width:100px; height:35px; 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" οndrοp="drop(event)" οndragοver="allowDrop(event)">
<img src="/i/w3school_logo_black.gif" draggable="true" οndragstart="drag(event)" id="drag1" />
</div>
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
</body>
</html>只要把每个屋子设置成可以将元素拖拽上去的div就行啦，下次加载的时候直接将元素设置成该div的子元素，可是还有重复拖拽，覆盖等情况需要考虑。
原生拖拽太拉跨了，纯js自己手写一个拖拽效果，纵享丝滑(代码片段)
...元素拖拽，通常都会先想到用HTML5的拖拽放置(Drag和Drop)来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋，无法实现更高级的用户体验：笔者因为之前有个... 查看详情
javascript之实现登录框拖拽效果(代码片段)
...以关闭登录框，并且下一次点击弹出登录框归位具体实现完整代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv= 查看详情
gridview实现拖拽排序以及数据交互(代码片段)
...查找资料过程中发现有人有这么一种需求，就是GridView在实现拖拽排序的基础上，如果是两个GridView之间实现拖拽效果，并要实现数据交互。一、效果图： &n... 查看详情
基于h5实现的react拖拽排序组件(代码片段)
...果要求兼容性丰富，使用鼠标点击的相关事件也很简单。实现的效果如下：第一步是先了解H5拖放的相关属性，MDN上有详细的说明，链接为https://developer.mozilla.org...有一点需要注意的是，react.js会给所有的属性事件名称前加上"on",... 查看详情
pyqt5学习记录---监听鼠标拖拽事件实现mac上百度云盘拖拽效果(代码片段)
...醒了操作者。本文介绍用PyQt5监听鼠标的拖拽事件，实现一个类似的效果，当拖拽时动态的改变整个界面边框颜色.下面先上源码，共两个文件。一个是入口的main.py文件，一个是自己写的MainWidget.源码widgets.py# 查看详情
怎么简单实现菜单拖拽排序的功能(代码片段)
...个「辅助类」，主要用于拖拽以及滑动处理。以接口实现的方式，达到配置简单、逻辑解耦、职责分明的效果，并且支持所有的布局方式。3、功能拆解4、功能实现4.1、实现接口自定义一个类，实现ItemTouchHelper.Call... 查看详情
怎么简单实现菜单拖拽排序的功能(代码片段)
...个「辅助类」，主要用于拖拽以及滑动处理。以接口实现的方式，达到配置简单、逻辑解耦、职责分明的效果，并且支持所有的布局方式。3、功能拆解4、功能实现4.1、实现接口自定义一个类，实现ItemTouchHelper.Call... 查看详情
盒子拖拽效果，原生js实现(代码片段)
原生js实现拖拽效果<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-sc... 查看详情
android自定义view:仿qq拖拽效果(代码片段)
...效果一的基础上改的,可以通过一行代码,让所有控件都能实现拖拽效果!所以先来编写效果一的代码~基础绘制首先编写一下基础代码:classTempView@JvmOver 查看详情
element-uitable表格组件实现可拖拽效果（行列）(代码片段)
首先，需要用到第三方库，sortable.js，因为我的项目是vue，所以在package引用的是vuedraggable，而vuedraggable是包含sortable的。npminstallsortable.js--save//或者npmi-Svuedraggable//vuedraggable依赖Sortable.js& 查看详情
react实现拖拽功能(代码片段)
实现效果：（可戳https://codepen.io/wenr/pen/EGEQxp查看）因为工作中会用到JIRA所以想实现一下相似的功能，顺便学习一下H5的拖拽。不支持拖拽改变顺序，感觉有点麻烦，而且没必要。感觉相关的博文好少的，大部分都是直接上代码... 查看详情
手机的滑动效果用html5如何实现
参考技术A普通banner或信息列表可以用IScroll上下左右均可滑动页面滑动切换的话建议使用jquerymobile，实现如下事件，进行changepageswipe(划动)：一秒内水平拖拽大于30PX，同时纵向拖曳小?0px的事件发生时触发swipeleft（左划）：划动事... 查看详情
pyqt5学习记录---监听鼠标拖拽事件实现mac上百度云盘拖拽效果(代码片段)
...醒了操作者。本文介绍用PyQt5监听鼠标的拖拽事件，实现一个类似的效果，当拖拽时动态的改变整个界面边框颜色.下面先上源码，共两个文件。一个是入口的main.py文件，一个是自己写的MainWidget.源码widgets.py#coding&#... 查看详情
androidactivity内实现可拖拽悬浮控件(代码片段)
效果图实现方式：//在activity中重写此方法@OverrideprotectedvoidonPostCreate(@NullableBundlesavedInstanceState)super.onPostCreate(savedInstanceState);//添加一个悬浮Viewroot=findViewById(android.R.id.conte 查看详情
vue实现bar左右拖拽(代码片段)
效果图功能实现bar左右拖拽左侧：js通过width控制 :style="width: lwidth"右侧：盒子设置定位position，js通过的left来控制，同时样式需要设置 right: 0; bottom: 0; 才会出现width中间：设置定位position，使用calc计算... 查看详情
原来这样可以实现鼠标拖拽(代码片段)
...一下这两个属性，发现居原来还可以用来做简单的拖拽。实现原理与放大镜那里一样，改变left与top的数值让div移动。 1#box2width:100px;3height:100px;4border:1pxsolidred;5background:rgba(24,41,2 查看详情
react-nativelistview拖拽交换item(代码片段)
...会发现在打开和关闭“首页展示标签”中，我并没有实现可拖拽换位item的效果。不过在自己新写的Gank.io项目中，将这一功能实现了一把，在此记录一下。先上效果图对，就是这样～在实现这个效果前，我... 查看详情
vue模块拖拽效果(代码片段)
正巧在之前面试中遇到问实现拖拽效果当时面试的时候简单回答了实现的方式与逻辑。现在闲来无事，把这个东西实现了一下。原理很简单，写的很方便。 数据驱动，建立一个数组，数组初始长度为1拖动触发时，添加一个... 查看详情