适合pc端的移动拖拽，分享一下。
h5新加的特性拖拽事件，但是只适合PC端哦。不多说了上代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
position: relative;
margin: 0;
}
body:before{
content: ' ';
display: table;
} #p3{
position: absolute;
}
#div1{
width: 100px;
height: 100px;
position: absolute;
top:500px;
left:500px;
background: #000;
}
</style>
</head>
<body>
<h1>拖动的源对象可能触发的事件</h1>
<!-- <p class="p1"></p> -->
<img id="p3" src="qd.png"/>
<div id="div1"></div>
<script>
//事件源p3开始拖动
var offsetX,offsetY;
p3.ondragstart=function(e){
console.log('事件源p3开始拖动');
//记录刚一拖动时，鼠标在飞机上的偏移量
offsetX= e.offsetX;
offsetY= e.offsetY;
}
//事件源p3拖动中
p3.ondrag=function(e){
console.log('事件源p3拖动中');
var x= e.pageX;
var y= e.pageY;
console.log(x+'-'+y);
//drag事件最后一刻，无法读取鼠标的坐标，pageX和pageY都变为0
if(x==0 && y==0){
return; //不处理拖动最后一刻X和Y都为0的情形
}
x-=offsetX;
y-=offsetY; p3.style.left=x+'px';
p3.style.top=y+'px';
}
// 源对象p3拖动结束
p3.ondragend=function(){
console.log('源对象p3拖动结束');
}
//源对象被拖动着进入目标对象
div1.ondragenter = function(){
console.log('drag enter111111111111111111');
}
//源对象被拖动着悬停目标对象上方
div1.ondragover = function(e){
//dragover 事件默认行为：必须触发drag leave
e.preventDefault();// 阻止事件的默认行为，使得drop事件可能触发
//有个默认行为是必须触发dragleave
console.log('drag over');
}
//源对象被拖动着离开了目标对象
div1.ondragleave = function(){
console.log('drag leave');
}
//源对象被拖动着目标对象上方被释放被松手
div1.ondrop = function(){
console.log('drag drop');
}
</script>
</body> </html>
适合pc端的移动拖拽，分享一下。的更多相关文章
- PC端的鼠标拖拽滑动
1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=fun ...
- javascript小实例，PC网页里的拖拽
几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今 ...
- Hammer.js 实现移动端元素的拖拽库
1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...
- javascript小实例，PC网页里的拖拽（转）
这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...
- PC端实现浏览器点击分享到QQ好友,空间,微信,微博等
网上现在比较流行的是JIaThis,但是测试的时候,不能分享给QQ好友,一直卡在输入验证码,以下代码亲测有效,可直接使用 <%@ page language="java" c ...
- js实现移动端悬浮图标拖拽
/** * Created by Administrator on 2019/5/23. */ window.onload = function () { var oDiv = document.ge ...
- 鼠标滚轮更改transform的值（vue-scroller在PC端的上下滑动）
目前上拉刷新,下拉加载,以及区域回弹的组件,绝大多数都是通过transform去实现的.在移动端效果很好,但是PC端使用鼠标拖拽的方式,查看下文首先不符合逻辑,其次容易点进其他页面. 起初,项目的初衷 ...
- PC端、移动端的页面适配及兼容处理
转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...
- JavaScript小实例：拖拽应用（二）
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
随机推荐
- RDF类型报表-PDF中文乱码
在Oracle R12中,遇到了客户一张客户化的报表: 报表的输出格式是布局在RDF文件(非RTF)中,在并发请求输出时,PDF会出现中文乱码,而HTML和excel显示正常: 根据资料: 查看$OA ...
- Android GreenDao清空数据库的方法
最近在做项目的时候,为了方便测试人员测试,在应用中加入正式库和测试库切换的功能.为了防止正式库和测试库切换带来的数据冲突,切换的时候必须把当前的数据库清空.代码如下: package com.exam ...
- 聪明的Azure CDN，帮你找到云端捷径
你知道吗?身处上海和纽约的两个用户同时通过网络收看“春晚”直播,纽约播放得可能比上海还要更流畅,这当然不是因为纽约距离北京的直播机房更近或者网速更快,而是因为大年夜在大洋彼岸围观“春晚”的观众相对较少 ...
- ansible使用4-Playbook Roles and Include Statements
task include --- # possibly saved as tasks/foo.yml - name: placeholder foo command: /bin/foo - name: ...
- java 通过接口在后台管理器中生成数据
需求:测试人员在后台批量添加数据很麻烦,特别是针对一款商品配置了英语,还需要手动添加法语.俄语.阿拉伯语,很麻烦,但是因为没有项目组配合,做个小工具批量生成数据就只有自己去研究了 第一步:通过抓包工具 ...
- Android（java）学习笔记61：Android中的 Application类用法
1. 简介 如果想在整个应用中使用全局变量,在java中一般是使用静态变量,public类型:而在android中如果使用这样的全局变量就不符合Android的框架架构,但是可以使用一种更优雅的方式就 ...
- Java继承和访问修饰符
继承 概念:为了提取两个类中公共代码,可以使用继承抽取重复性的代码到一个公共类中,这个公共的类称为父类(super class).继承于父类的类称为子类(sub class). 关键字 ext ...
- redis redis的连接
昨天2017年12月26日,我刚刚从网上下载了redis.经过一天的摸索,踩了不少坑.昨天下午,比较磕磕巴巴,今天早上 终于比较完善地完成了一次小操作. 使用cmd的重要步骤 1.输入redis-se ...
- matlab 下载
Obrazy DVD programu Matlab ke stažení Verze 2015b Verze 2015a Verze 2014b Verze 2014a Verze 2012b Ve ...
- 合格PHP工程师的知识结构 (转载)
工作有些年头了,从学校开始自学ASP,偶然因为PHP一个功能爱上它(ASP上传代码要写好多,PHP基本几行就搞定了),从此走上了 ”拍黄片“ 之路.结合这几年的工作经验,说说我对PHP工程师知识结构的 ...