完美拖拽

html代码:

<div id="div1"></div>

css代码:

#div1{width:100px;height:100px;background:red;position:absolute}

javascript代码:

window.onload=function(){
    var oDiv=document.getElementById("div1");
    var x=0;
    var y=0;
    oDiv.onmousedown=function(ev){
        var oEvent=ev||event;
        //鼠标的横坐标减去div的offsetLeft
        x=oEvent.clientX-oDiv.offsetLeft;
        //鼠标的纵坐标减去div的offsetTop
        y=oEvent.clientY-oDiv.offsetTop;  
        
        document.onmousemove=function(ev){
            var oEvent=ev||event;     
            var left=oEvent.clientX-x;
            var right=oEvent.clientY-y;
            //判断左边是否过界
            if(left<0){
                left=0;
            }
            //判断右边是否过界
            else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){
                left=document.documentElement.clientWidth-oDiv.offsetWidth;
            }
            //判断上边是否过界
            if(right<0){
                right=0;
            }
            //判断下边是否过界
            else if(right>document.documentElenment.clientHeight){
                right=document.documentElenment.clientHeight-oDiv.offsetHeight;
            }
            oDiv.style.left=left+"px";
            oDiv.style.top=right+"px";
        }      
        document.onmouseup=function(){
            //清空document的事件
            document.onmousemove=null;
            document.onmouseup=null;
        }
        //解决低版本火狐bug,干掉系统默认
        return false;
    }

}
时间: 2024-11-04 20:27:46

完美拖拽的相关文章

完美拖拽 &amp;&amp;仿腾讯微博效果&amp;&amp; 自定义多级右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

完美拖拽及回放

2019-08-09 21:54:40 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>完美拖拽</title> <style type="text/css"> html, body { overflow: hidden; } body, div, h2, p { margin: 0; padding: 0; }

完美拖拽思路

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content=""><meta name="copyright" content="智"><title></title><style>* { margin:0;

js完美拖拽封装及其案例

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #bo

JS完美拖拽

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ height: 100px; width: 100px; background:red; position: absolute; cu

拖拽回放

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>完美拖拽</title> <style type="text/css"> html, body { overflow:hidden; } body, div, h

android开发游记:SpringView 下拉刷新的高效解决方案,定制你自己风格的拖拽页面

关于下拉刷新/上拉加载更多的解决方案网上已经有很多了,浏览了目前主流的下拉控件比如PullToRefresh库等,第一:大多数实现库都难以进行动画和样式的自定义.第二:不能很好的兼容多种滚动控件,它们都对listView.RecyclerView等进行了不同程度的重新实现,你在项目中就得使用库提供的PullToRefreshListView.PullToRefreshRecyclerView等来代替源生的listView.RecyclerView等,这样的方式其实并不好,随着android版本的

nw.js FrameLess Window下的窗口拖拽与窗口大小控制

nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将frame选项设置为false. { "name": "1", "main": "index.html", "nodejs": true, "single-instance": false, &

为什么当拖拽窗口时画面停止渲染?

因为当用户拖拽窗口时,窗口会接收到WM_SYSCOMMANDD消息,参数是SC_MOVE. 此时DefWindowProc不会返回,直到鼠标松开. 比较特殊的是WM_ENTERSIZEMOVE和WM_EXITSIZEMOVE你还是可以收到.所以有人的解决方法是在这里加定时器去渲染,但是你要解决的不仅仅是渲染问题,还有逻辑问题.所以,这个方案其实也不完美.个人觉得还是想办法绕开吧....