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. java空和非空判断

    public static boolean isEmpty(String str){ if("".equals(str)||str==null){ return true; }el ...

  2. mysql之备份表和备份数据库

    备份表 1.首先创建一个与原来一样的表 create table score2 like score; ###like就是将score表的结构拷贝过来,但是它并不执行数据:也就是说执行完上面的语句之后 ...

  3. 集合划分——cf1028D思维题

    非常思维的一道题目,题意很长 给定s1,s2两个集合,s1维护最大值,s2维护最小值,s1的所有元素要比s2小 操作1:往两个集合里的任意一个添加x 操作2:把x从所在的集合里删掉:要求被删的x必须是 ...

  4. CSS自动换行、强制不换行、强制断行、超出显示省略号

    转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...

  5. 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 ...

  6. python面向对象应用-1

    #猫 定义类 class Cat: type = '猫' #通过__init__初始化的特征 def __init__(self,nickname,age,color): self.nickname ...

  7. 02_jQuery对象初识(二)筛选器1

    0. HTML对象和jQuery对象的区别: 1.jQuery对象转换成DOM对象,用索引取出具体的标签 2.DOM对象转换成jQuery对象,$(DOM对象) 注意:jQuery对象保存到变量的时候 ...

  8. <随便写>创建文件批处理文件

    创建一个text文档 写入想写的程序 将后缀改为bat 例如创建一个文件夹: 双击运行bat文件就可以创建文件夹 运行结果: 需要批量处理,就用for循环生成代码,粘贴上去就行了

  9. jquery移除元素某个属性

    removeAttr() 方法从被选元素中移除属性. 例如:$("p").removeAttr("style");

  10. oracle中utl_file包读写文件操作实例学习

    在oracle中utl_file包提供了一些操作文本文件的函数和过程,学习了一下他的基本操作 1.创建directory,并给用户授权 复制代码 代码如下: --创建directory create ...