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 大概 ...
随机推荐
- 【笔记篇】C#笔记3
笔记目录:http://blog.csdn.net/enzymii/article/details/77169928 C#的接口有点意思,我们说过可以用来多重继承.. using System; na ...
- 单体内置对象——Global对象
单体内置对象的定义:由ECMAScript实现提供的.不依赖于宿主环境的对象,这些对象在ECMAScript程序执行之前已经存在了.意思就是说:开发人员不必显式地实例化内置对象,因为他们已经实例化了. ...
- git sync tags with remote
git 同步遠程標籤 在 .git/config的 [remote "origin"] 下加了 fetch = +refs/tags/*:refs/tags/* 最後就變成 [re ...
- 【JZOJ3379】查询
description 对于一个整数序列,查询区间第k大数可以在O(logN)的时间内轻松完成.现在我们对这个问题进行推广. 考虑带重复数的集合(multiset).定义在该类集合上的并操作" ...
- 第十章 Odoo 12开发之后台视图 - 设计用户界面
本文将学习如何为用户创建图形化界面来与图书应用交互.我们将了解不同视图类型和小组件(widgets)之间的差别,以及如何使用它们来提供更优的用户体验. 本文主要内容有: 菜单项 窗口操作(Window ...
- l洛谷 NOIP提高组模拟赛 Day2
传送门 ## T1 区间修改+单点查询.差分树状数组. #include<iostream> #include<cstdio> #include<cstring> ...
- Error-IDEA:“Import from external model” 与 “Create from existing source”的区别
ylbtech-Error-IDEA:“Import from external model” 与 “Create from existing source”的区别 1.返回顶部 1. “Import ...
- 转:进程上下文VS中断上下文
源地址:http://www.cnblogs.com/zzx1045917067/archive/2012/12/19/2824552.html 内核空间和用户空间是现代操作系统的两种工作模式,内核模 ...
- GitHub:如何构建一个股票市场知识图谱?(附代码&链接)
来源:专知 本文约 600007 董事⻓/董事 高燕 女 60 600007 执⾏董事 刘永政 男 50 600008 董事⻓/董事 ··· ··· ··· ··· ··· 注:建议表头最好用相应的英 ...
- ssh连接Ubuntu之access denied
解决方法是: 修改/etc/ssh/ssh_config文件, #PermitRootLogin prohibit-password改为PermitRootLogin yes 然后 PasswordA ...