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 大概 ...
随机推荐
- Ubuntu环境下java.lang.SecurityException: Invalid signature file digest for Manifest main attributes
一.问题描述 Ubuntu环境中,将maven项目打包成jar包传到服务器中后运行以下指令: $ java -cp my.jar com.myproject.Main 遇到报错: java.lang. ...
- 小程序中template的用法
demo案例: wxml代码: <view> <text>template使用demo</text> <!-- <view wx:for="{ ...
- leetcode-142-环形链表②
题目描述: 方法一:O(n) O(n) # Definition for singly-linked list. # class ListNode(object): # def __init__(se ...
- threading.local在flask中的用法
一.介绍 threading.local的作用: 多个线程修改同一个数据,复制多份变量给每个线程用,为每个线程开辟一块空间进行数据的存储,而每块空间内的数据也不会错乱. 二.不使用threading. ...
- python随机数(转载)
随机生成 0 到 1 之间的浮点数 random.random() 方法会返回 [0.0, 1.0) 之间的浮点数,注意,这是一个左闭右开的区间,随机数可能会是 0 但不可能为 1 . 随机生成 a ...
- laravel框架5.5 连接redis和redis集群
'redis' => [ 'client' => 'predis', 'default' => [ 'host' => env('REDIS_HOST', '127.0.0.1 ...
- ubuntu挂载和挂载NTFS分区命令
1.挂载 首先安装NTFS-3g,不过Ubuntu一般自带: sudo apt install ntfs-3g 查看分区信息: sudo fdisk -l 结果类似: /dev/sda1 * ...
- iOS开发自定义转场动画
1.转场动画 iOS7之后开发者可以自定义界面切换的转场动画,就是在模态弹出(present.dismiss),Navigation的(push.pop),TabBar的系统切换效果之外自定义切换动画 ...
- Everything-启用http服务器(公网IP)会导致共享文件被搜索引擎搜索
1. 漏洞利用成功的前提 公网ip 启用http服务器 2.产生原因 启用http服务器功能点:让用户在本地或局域网上的其他电脑使用浏览器进行搜索,并支持文件下载.若拥有公网IP的用户启用此功能,就是 ...
- 《DSP using MATLAB》Problem 7.35
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...