pc端拖拽
var move=document.getElementsByClassName("page1_2")[0];
var startX=0;
var startY=0;
var x=0;
var y=0;
var off = 0;
move.onmousedown=function (e) {
var e = e || event;
off=1;
startX = this.offsetLeft;
startY = this.offsetTop;
x=e.pageX-startX;
y=e.pageY-startY;
};
document.onmousemove=function (e) {
var e = e || event;
if (!off)return;
var x1=e.pageX-x;
var y1=e.pageY-y;
if(x1<0){
x1=0
}
if(y1<0){
y1=0
}
if(x1>window.innerWidth-move.offsetWidth){
x1=window.innerWidth-move.offsetWidth
}
if(y1>window.innerHeight-move.offsetHeight){
y1=window.innerHeight-move.offsetHeight
}
move.style.left=x1+'px';
move.style.top=y1+"px";
};
document.onmouseup=function (e) {
off = 0;
};
window.onload=function(){
var q1=document.getElementById('q1');
var disx=0;
var disy=0;
q1.onmousedown=function(ev){
var oEvent=ev||event;
disx=oEvent.clientX-q1.offsetLeft;
disy=oEvent.clientY-q1.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disx;
var t=oEvent.clientY-disy;
if(l<0){
l=0
}else if(l>document.documentElement.clientWidth-q1.offsetWidth){
l=document.documentElement.clientWidth-q1.offsetWidth
}
if(t<0){
t=0
}
else if(t>document.documentElement.clientHeight-q1.offsetHeight){
t=document.documentElement.clientHeight-q1.offsetHeight
}
q1.style.left=l+'px';
q1.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
};
return false;//阻止默认行为,火狐浏览器第二次拖拽有空div
}
pc端拖拽的更多相关文章
- 一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..
https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动 ...
- pc端移动端拖拽实现
#div1 { width: 100px; height: 100px; background: red; position: absolute; } html <div id="di ...
- 移动端拖拽(模块化开发,触摸事件,webpack)
通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...
- 开发Canvas 绘画应用(四):实现拖拽绘画
在开发Canvas绘画应用(三):实现对照绘画中,我们实现了视图引导的第一部分,这一篇我们来完成第二部分,即将图片直接拖到画布上进行绘画. ✁ 拖放如何实现? [拖放的基本概念]:创建一个绝对定位的元 ...
- 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件
当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...
- PC端的鼠标拖拽滑动
1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=fun ...
- Unity输出PC端(Windows) 拖拽文件到app中
需求:给策划们写一个PC端(Window)的Excel导表工具.本来用OpenFile打开FileExplorerDialog后让他们自己选择想要添加的Excel文件就行了,结果有个需求是希望能拖拽E ...
- 适合pc端的移动拖拽,分享一下。
h5新加的特性拖拽事件,但是只适合PC端哦.不多说了上代码 <!DOCTYPE html> <html> <head> <title></titl ...
- 拼图 canvas分割 dom拖拽 pc 移动端
参考:Canvas drag 实现拖拽拼图小游戏 参考的案例,不支持手机端.总结下实现过程中遇到的小坑. gitHub:https://github.com/WppFrontEnd/puzzle 大概 ...
随机推荐
- DMZ在虚拟化环境中的部署
常见的方法有三种: 1.分别部署 2.部分虚拟化 3.全部虚拟化 传统DMZ部署结构: 分别部署: 想要保持DMZ区域物理隔离采用这种方法,每个区域分别部署进入不同的服务器集群,区域之间的连接采用物理 ...
- Java jmx的使用
JMX Java Management Extensions,Java管理扩展.本质就是用来监控java语言开发的程序,一般常用于jconsole,java visual VM的监控,今天主要介绍ja ...
- 牛客网在线判题系统JavaScript(V8)使用
JavaScript作为一种弱类型的编程语言,语法和C/C++.JAVA等存在差别,但是对于大部算法题,不只是C/C++.JAVA,也依然可以使用JavaScript来实现.所以在牛客网中,如果你喜欢 ...
- [洛谷P1966] 火柴排队
题目链接: 火柴排队 题目分析: 感觉比较顺理成章地就能推出来?似乎是个一眼题 交换的话多半会往逆序对上面想,然后题目给那个式子就是拿来吓人的根本没有卵用 唯一的用处大概是告诉你考虑贪心一波,很显然有 ...
- opencv-图像类型、深度、通道
转自:图像类型 与 opencv中图像基础(大小,深度,通道) 一.图像基本类型 在计算机中,按照颜色和灰度的多少可以将图像分为四种基本类型. 1. 二值图像 2. 灰度图像 3. 索引图像 4 ...
- Gen8折腾日记
(2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月7日,可惜在博客园这边不能修改发布时间.) 放假伊始,老大订购了两台服务器,一台是Dell的R630,用于其他 ...
- poi 3669 meteor shower (bfs)
题目链接:http://poj.org/problem?id=3669 很基础的一道bfs的题,然而,我却mle了好多次,并且第二天才发现错在了哪里_(:з)∠)_ 写bfs或者dfs一定要记得对走过 ...
- PAT甲级——A1074 Reversing Linked List
Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elem ...
- 11-3-while
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 使用QRcode生成二维码或在线生成二维码
参考:https://blog.csdn.net/zhuswy/article/details/80267748 1.安装qrcode.js npm install qrcodejs2 --save ...