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端拖拽的更多相关文章

  1. 一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

    https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动 ...

  2. pc端移动端拖拽实现

    #div1 { width: 100px; height: 100px; background: red; position: absolute; } html <div id="di ...

  3. 移动端拖拽(模块化开发,触摸事件,webpack)

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...

  4. 开发Canvas 绘画应用(四):实现拖拽绘画

    在开发Canvas绘画应用(三):实现对照绘画中,我们实现了视图引导的第一部分,这一篇我们来完成第二部分,即将图片直接拖到画布上进行绘画. ✁ 拖放如何实现? [拖放的基本概念]:创建一个绝对定位的元 ...

  5. 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件

    当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...

  6. PC端的鼠标拖拽滑动

    1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=fun ...

  7. Unity输出PC端(Windows) 拖拽文件到app中

    需求:给策划们写一个PC端(Window)的Excel导表工具.本来用OpenFile打开FileExplorerDialog后让他们自己选择想要添加的Excel文件就行了,结果有个需求是希望能拖拽E ...

  8. 适合pc端的移动拖拽,分享一下。

    h5新加的特性拖拽事件,但是只适合PC端哦.不多说了上代码 <!DOCTYPE html> <html> <head> <title></titl ...

  9. 拼图 canvas分割 dom拖拽 pc 移动端

    参考:Canvas drag 实现拖拽拼图小游戏 参考的案例,不支持手机端.总结下实现过程中遇到的小坑. gitHub:https://github.com/WppFrontEnd/puzzle 大概 ...

随机推荐

  1. 自定义Jquery:ajax,get,post方法

    var myAjax = { request: function(url, type, data, callback) { $.ajax(url, { type: type, data: data, ...

  2. springboot中pageHelper插件 list设置不进去 为null

    分页pageHelper中list放不进去值  为null,可能的解决方案如下: 1. 注意代码顺序,PageHelper.startPage(pageNumber,pageSize)要放在查询Lis ...

  3. [转]C#多线程学习 之 线程池[ThreadPool]

    在多线程的程序中,经常会出现两种情况: 一种情况:   应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应                   这一般使用ThreadPo ...

  4. JedisCluster API 整理

    windows版redis启动服务器命令:redis-server redis.windows.conf 图表来自菜鸟教程: 列表的操作命令 序号 命令及描述 1 BLPOP key1 [key2 ] ...

  5. Google 打算用 QUIC 协议替代 TCP/UDP

    有句话叫做一流企业定标准.二流企业做品牌.三流企业卖技术.四流企业做产品.Google 似乎在冲着一流企业的目标迈进.去年,Google 已经从以 SPDY 为基础的 HTTP 协议 16年 来的首个 ...

  6. index方法用于数据集的强制索引操作

    index方法为3.2.3版本新增,用于数据集的强制索引操作,例如: $Model->index('user')->select(); 对查询强制使用user索引,user必须是数据表实际 ...

  7. SQLServer中使用索引视图

    在SQL Server中,视图是一个保存的T-SQL查询.视图定义由SQL Server保存,以便它能够用作一个虚拟表来简化查询,并给基表增加另一层安全.但是,它并不占用数据库的任何空间.实际上,在你 ...

  8. JS-jquery 获取当前点击的对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. Jdk8 Hashmap ConcurrentHashMap

    JDK1.8 Hashmap JDK1.8 ConcurrentHashMap 不采用segment而采用 synchronized (f)  f = table[i]; 减小锁的力度 设计了MOVE ...

  10. HDU--2191 汶川地震购米(多重背包)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2191 分析:有资金n元,而市场有m种大米,每种大米价格不等,重量不等,数量不等, 并且只能整袋购买.如何用 ...