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 大概 ... 
随机推荐
- 自定义Jquery:ajax,get,post方法
			var myAjax = { request: function(url, type, data, callback) { $.ajax(url, { type: type, data: data, ... 
- springboot中pageHelper插件 list设置不进去 为null
			分页pageHelper中list放不进去值 为null,可能的解决方案如下: 1. 注意代码顺序,PageHelper.startPage(pageNumber,pageSize)要放在查询Lis ... 
- [转]C#多线程学习 之 线程池[ThreadPool]
			在多线程的程序中,经常会出现两种情况: 一种情况: 应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应 这一般使用ThreadPo ... 
- JedisCluster API 整理
			windows版redis启动服务器命令:redis-server redis.windows.conf 图表来自菜鸟教程: 列表的操作命令 序号 命令及描述 1 BLPOP key1 [key2 ] ... 
- Google 打算用 QUIC 协议替代 TCP/UDP
			有句话叫做一流企业定标准.二流企业做品牌.三流企业卖技术.四流企业做产品.Google 似乎在冲着一流企业的目标迈进.去年,Google 已经从以 SPDY 为基础的 HTTP 协议 16年 来的首个 ... 
- index方法用于数据集的强制索引操作
			index方法为3.2.3版本新增,用于数据集的强制索引操作,例如: $Model->index('user')->select(); 对查询强制使用user索引,user必须是数据表实际 ... 
- SQLServer中使用索引视图
			在SQL Server中,视图是一个保存的T-SQL查询.视图定义由SQL Server保存,以便它能够用作一个虚拟表来简化查询,并给基表增加另一层安全.但是,它并不占用数据库的任何空间.实际上,在你 ... 
- JS-jquery 获取当前点击的对象
			<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ... 
- Jdk8 Hashmap ConcurrentHashMap
			JDK1.8 Hashmap JDK1.8 ConcurrentHashMap 不采用segment而采用 synchronized (f) f = table[i]; 减小锁的力度 设计了MOVE ... 
- HDU--2191 汶川地震购米(多重背包)
			题目:http://acm.hdu.edu.cn/showproblem.php?pid=2191 分析:有资金n元,而市场有m种大米,每种大米价格不等,重量不等,数量不等, 并且只能整袋购买.如何用 ... 
