H5的新应用-拖到页面上的元素
——————————————————————————
<script type="text/javascript">
//当图片放下以后的事件回调
function allowDrop(ev){
ev.preventDefault(); //屏蔽掉事件默认的行为
}
//图片被拖动时的事件回调
function drag(ev){
//把图片的id通过事件传递
ev.dataTransfer.setData("IMG_ID",ev.target.id);
}
//当图片放下时的事件回调
function drop(ev){
ev.preventDefault(); //屏蔽掉事件默认的行为
//获取被拖动的图片的id值
var data = ev.dataTransfer.getData("IMG_ID");
//得到图片的DOM对象
var pic = document.getElementById(data);
//在目标DIV里挂接图片DOM
ev.target.appendChild(pic);
}
</script>
——————————————————————————————
<style>
div{width: 300px; height: 80px; border: 1px solid black; margin: 0 auto; padding: 5px;}
</style>
——————————————————————————————
<body style="text-align:center">
<p>把图片拖动到矩形框里:</p>
<!-- 目标容器的ondrop和ondragover事件的设置 -->
<div id="myDiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<!-- 图片的属性和事件设置 -->
<img id="myDrag" src="drag_img.jpg" draggable="true" ondragstart="drag(event)" />
</body>
————————————————————————————————
最新文章
- Android自定义View之圆环交替 等待效果
- TaskScheduler一个.NET版任务调度器
- SpringMVC之controller篇
- POJ1160 Post Office[序列DP]
- hdoj 3072 Intelligence System【求scc&&缩点】【求连通所有scc的最小花费】
- 【原】iOS 获取当前和 前后n天的日期
- Working with Numbers in PL/SQL（在PL/SQL中使用数字）
- Failed to upgrade Oracle Cluster Registry configuration(root.sh)
- java关于map用来筛选的用法
- 队列工厂之RedisMQ
- js 关于性能的数据存储
- [ZJOI2008]瞭望塔
- ●BZOJ 2007 NOI 2010 海拔
- Linux查看CPU、内存、进程使用情况（转）
- 通过反射实现get和set方法
- git和svn的对比
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
- LPC43xx双核笔记
- Android MediaScanner 总纲
- Final阶段第1周/共1周 Scrum立会报告+燃尽图 02