精华内容
下载资源
问答
  • js 鼠标拖动div

    2019-11-27 13:04:30
    div中心跟踪鼠标动而动 得到鼠标坐标,移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动 得到鼠标第一次坐标,移动时div的左上距离就为div每次移动前最开始的左上距离加上...

    div中心跟踪鼠标动而动
    得到鼠标坐标,移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离

    div任意位置随鼠标动而动
    得到鼠标第一次坐标,移动时div的左上距离就为div每次移动前最开始的左上距离加上鼠标移动中的坐标减去鼠标第一次坐标,即任意位置移动是移动过程相对于第一次的位移

    小div在大div内移动
    在任意移动的基础上,判断div的最终左上边距,如果大于或小于大div的大小,则将小div的左右边界设置为临界值

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			
    			.div1{
    				height:100px;
    				width:100px;
    				background-color: orange;
    				position:absolute;
    				top:100px;
    				left: 100px;
    			}	
    					
    		</style>
    	</head>
    	<body>
    		<div class="div1">
    			
    		</div>
    		
    		<script>
    			var div1=document.querySelector(".div1");
    			var flag=false;
    			var mx=0;
    			var my=0;
    			var dx=0;
    			var dy=0;
    			div1.onmousedown=function(){
    				flag=true;
    				console.log("a");
    				mx=event.clientX;
    				my=event.clientY;
    				dx=div1.offsetLeft;
    				dy=div1.offsetTop;
    
    			}
    			
    				
    				document.onmousemove=function(){  //在整个html范围内滑动
    					
    					if(flag){
    						var templeft=event.clientX;
    						var temptop=event.clientY;
    						
    						div1.style.left=templeft-mx+dx+"px";
    						div1.style.top=temptop-my+dy+"px";   //样式任意位置随鼠标拖动而拖动
    						
    						
    						/*div1.style.left=templeft-50+"px";
    						div1.style.top=temptop-50+"px";*/  //样式中心随鼠标拖动而拖动
    					}
    				}
    			document.onmouseup=function()
    			{
    				flag=false;
    			}
    			
    			
    		</script>
    	</body>
    </html>
    

    小div在大div内移动

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			.big{
    				width:500px;
    				height:500px;
    				border:solid 1px orange;
    				position: relative;
    				left:50px;
    				top:50px;
    			}
    			.small{
    				width:100px;
    				height:100px;
    				background-color:orange;
    				position:absolute;
    				left:50px;
    				top:100px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="big">
    			<div class="small">
    				
    			</div>
    		</div>
    		
    		<script>
    			var big=document.querySelector(".big");
    			var small=document.querySelector(".small");
    			var flag=false;
    			var cx;
    			var cy;
    			var sx;
    			var sy;
    			
    			
    			small.onmousedown=function(){
    				flag=true;
    				cx=event.clientX;
    				cy=event.clientY;
    				sx=small.offsetLeft;
    				sy=small.offsetTop;
    				console.log(cx,sx);
    			}
    			
    			big.onmousemove=function(){
    				if(flag){
    					var ccx=event.clientX;
    					var ccy=event.clientY;
    					
    					var resultx=sx+ccx-cx;
    					var resulty=sy+ccy-cy;
    					
    					
    					//确定边界
    					if(resultx<0)
    					{
    						resultx=0;
    					}
    					if(resultx>400)
    					{
    						resultx=400;
    					}
    					if(resulty<0)
    					{
    						resulty=0;
    					}
    					if(resulty>400)
    					{
    						resulty=400;
    					}
    					//结果
    					small.style.left=resultx+"px";
    					small.style.top=resulty+"px";
    					
    					
    				}
    			}
    
    			document.onmouseup=function(){
    				flag=false;
    				
    			}
    		</script>
    	</body>
    </html>
    
    展开全文
  • js鼠标拖动Div

    千次阅读 2011-04-13 14:13:00
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title> 鼠标...

    <!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>
    <title> 鼠标拖动层(可任意绑定DIV标签)(一) </title>
    <script language="javascript" type="text/javascript">
    /*
    鼠标拖动层(可任意绑定DIV标签)(一)
    调用方法:var myDrag=new Endrag(source,target,offSetX, offSetY);
    参数说明:source--鼠标动作绑定对象;target--操作目标对象(要移动的对象);offSetX--横坐标偏移;offSetY--纵坐标偏移
    说明:通过多次调用本方法绑定多个对象的拖动
    */
     funs={
        index:100, 
        getFocus:function (target){ 
            if(target.style.zIndex!=this.index){ 
                this.index += 2; 
                var idx = this.index; 
                target.style.zIndex=idx; 
            } 
        },
        abs:function (element) {
            var result = { x: element.offsetLeft, y: element.offsetTop};
            element = element.offsetParent;
            while (element) {
                result.x += element.offsetLeft;
                result.y += element.offsetTop;
                element = element.offsetParent;
            }
            return result;
        }
     };
     
     function Endrag(source,target,offSetX, offSetY){
        source=typeof(source)=="object" ? source:document.getElementById(source);
        target=typeof(target)=="object" ? target:document.getElementById(target);
        var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100,NS=(navigator.appName=='Netscape');
        offSetX=typeof offSetX== "undefined" ? 0:offSetX;
        offSetY=typeof offSetY== "undefined" ? 0:offSetY;
        source.οnmοusedοwn=function(e){
            e = e ? e : (window.event ? window.event : null);
            funs.getFocus(target);
            if(e.button==(NS)?0 :1)  {
                if(!NS){this.setCapture()}
                x0 = e.clientX ; 
                y0 = e.clientY ; 
                x1 = parseInt(funs.abs(target).x); 
                y1 = parseInt(funs.abs(target).y);   
                moveable = true; 
            } 
        }; 
        //拖动; 
        source.οnmοusemοve=function(e){
            e = e ? e : (window.event ? window.event : null); 
            if(moveable){ 
                target.style.left = (x1 + e.clientX - x0 - offSetX) + "px"; 
                target.style.top  = (y1 + e.clientY - y0 - offSetY) + "px"; 
            } 
        };
        //停止拖动; 
        source.οnmοuseup=function (e){
            if(moveable)  {  
                if(!NS){this.releaseCapture();}
                moveable = false; 
            } 
        };
    }
    </script>
    </head>
    <body οnlοad="var i=new Endrag('hand','MoveDiv',0,0);var j=new Endrag('Div1','Div1',0,0);">
    <div id="MoveDiv" style="position:absolute;left:200px;top:50px;width:400px;height:200px;border:1px #dddddd solid;">
    <div id="hand" style="line-height:25px;text-align:center;background:#f00">
    这个用子标签操作父标签
    </div>
    调用方法<br />var i=new Endrag('hand','MoveDiv',0,0);<br />
    第一个参数为源标签对象或对象id属性;第二个参数为要移动的目标对象或对象id属性;第3、4个参数为偏移值,供最后调整用;<br />
    鼠标指针在红色区域才有效
    </div>
    <div id="Div1" style="background:#ffffff;position:absolute;left:400px;top:300px;width:300px;height:200px;border:1px #dddddd solid;">
    <div id="Div2" style="line-height:25px;text-align:center;background:#f00">
    这个用自标签操作自己
    </div>
    调用方法<br />var j=new Endrag('Div1','Div1',0,0);<br />
    第一个参数为源标签对象或对象id属性;第二个参数为要移动的目标对象或对象id属性;第3、4个参数为偏移值,供最后调整用;<br />
    鼠标指针在Div1标签内就有效
    </div>
    </body>
    </html>
     


    展开全文
  • <!DOCTYPEHTMLPUBLIC"-//W3C//DTD...<...<HEAD><TITLE>一款代码精简的JS鼠标拖动DIV层效果丨芯晴网页特效丨CsrCode.Cn</TITLE><scripttype="text/javascript">...
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
    <TITLE>一款代码精简的JS鼠标拖动DIV层效果丨芯晴网页特效丨CsrCode.Cn</TITLE>
    <script type="text/javascript">
    function drag(o){
    o=document.getElementById(o);
    o.style.position="absolute";
     o.οnmοusedοwn=function(e){
      e=e||window.event;
      var x=e.layerX||e.offsetX;
      var y=e.layerY||e.offsetY;
      document.οnmοusemοve=function(e){
       e=e||window.event;
       o.style.left=(e.clientX-x)+"px";
       o.style.top=(e.clientY-y)+"px";};
      document.οnmοuseup=function(){document.οnmοusemοve=null;o.οnmοusedοwn=null;};};}
      </script>
     </HEAD>
     <BODY>
      <div id="cen">
    <p class="control" style="margin-bottom:10px;" title="开始拖动" οnmοusedοwn="drag('cen')"><b>按此处开始拖动</b></p>
    <p>这里可以是一段文字</p>
    <p>其实也可以是一个层!</p>
    <p><a href="/"><img src="/images/m01.jpg" border=0></a></p>
     </BODY>
    </HTML>

    <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>

    转载于:https://www.cnblogs.com/csr04/archive/2012/08/23/2652812.html

    展开全文
  • JS实现鼠标拖动div移动(附效果演示)
  • js实现鼠标拖动div.html

    2020-02-14 22:14:26
    今天有个需求,要实现弹框,并且需要能过拖动位置,放大缩小等功能,这里是一个纯JS实现拖动的例子,有需要完整案例,或者其他功能可以私信,我懂的都会帮你
  • js时实现鼠标拖动div

    2020-04-09 16:55:26
    实现js拖动div 实现步骤: 鼠标按下时,标记元素为可拖动状态,并记下鼠标当前位置的偏移; 鼠标开始移动,判断元素状态是否可以拖动,如果是则更新元素位置到当前鼠标的位置; 放开鼠标后,元素变为不可拖动状态。...

    实现js拖动div
    实现步骤:

    1. 鼠标按下时,标记元素为可拖动状态,并记下鼠标当前位置的偏移;
    2. 鼠标开始移动,判断元素状态是否可以拖动,如果是则更新元素位置到当前鼠标的位置;
    3. 放开鼠标后,元素变为不可拖动状态。
      在这里插入图片描述
      图示解释:
      在这里插入图片描述

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>鼠标拖动div</title>
      <style media="screen">
        .move {
          width: 400px; height: 300px;
          margin: 0 auto; border: 1px solid #cccccc;
          position: absolute; left: 200px; top: 100px;
          background: #e1eafc;
        }
        .move-header {
          height: 50px; line-height: 50px;
          text-align: center; background: #beceeb;
          cursor: move;
          user-select: none;
        }
      </style>
    </head>
    <body>
      <div class="move" id="move">
        <div class="move-header" id="move-header">
          按住拖拽
        </div>
        <div class="move-body">
          实现步骤。。。。
          <p>1. 鼠标按下时,标记元素为可拖动状态,并记下鼠标当前位置的偏移;</p>
          <p>2. 鼠标开始移动,判断元素状态是否可以拖动,如果是则更新元素位置到当前鼠标的位置;</p>
          <p>3. 放开鼠标后,元素变为不可拖动状态。</p>
        </div>
      </div>
    
      <script>
        window.onload = function () {
          var mouseOffsetX = 0; // 记录当前鼠标位置
          var mouseOffsetY = 0;
          var isDraging = false; // 记录元素是否可以拖动
          
          // 鼠标事件1:鼠标按下标记元素为可拖动状态,并且记下鼠标当前位置的偏移
          get('move-header').addEventListener('mousedown', function (e) {
            var e = e || window.event;
            // 鼠标距离div左侧偏移距离 =  e.pageX鼠标距离页面左侧距离 - get('move').offsetLeft为div距离页面左侧距离
            mouseOffsetX = e.pageX - get('move').offsetLeft;
            mouseOffsetY = e.pageY - get('move').offsetTop;
           
            isDraging = true;
          })
    
          // 鼠标事件2:鼠标开始移动,要检测浮层是否标记为移动,如果是则更新元素位置到当前鼠标位置
          document.onmousemove = function (e) {
            var e = e || window.event;
            var moveX = 0;
            var moveY = 0;
    
            if (isDraging === true) {
              // div左侧距离页面左侧距离 = e.pageX鼠标距离页面左侧距离 - mouseOffsetX鼠标距离div左侧偏移距离
              moveX = e.pageX - mouseOffsetX;
              moveY = e.pageY - mouseOffsetY;
              
              get('move').style.left = moveX + "px";
              get('move').style.top = moveY + "px";
            }
    
          }
          
          //  鼠标事件3:放开鼠标后,元素变为不可拖动
          document.onmouseup = function () {
            isDraging = false;
          }
          
          function get (id) {
            return document.getElementById(id)
          }
        }
    
      </script>
    </body>
    </html>
    

    此文转载于,加了注释理解及图片:百度经验

    展开全文
  • js鼠标拖动对象,可让任何div实现拖动效果,需要的朋友可以参考下。
  • JS实现鼠标拖动div移动

    千次阅读 2017-09-26 19:46:53
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> cript"> var mouseX, mouseY; var objX, objY; var isDowm = false; //是否按
  •  <div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 13px; padding-top: 5px; padding-left: 10px;"> title-title </div>  </div> var posX; var ...
  • 1.代码 var disX=0; var disY=0; $('.private_area').on('mousedown',function(event) { disX=event.clientX-$('.private_area')[0].offsetLeft; disY=event....
  • 拖动div为最外层的div,这段代码对显示对话框的头部绑定鼠标监听事件,当鼠标移动时,整个div也相应的移动,具体的实现如下,感兴趣的朋友可以参考下
  • js div鼠标拖动

    2019-09-03 23:09:03
    --div 鼠标拖动 end -->      /*鼠标拖动*/  function drag(obj, event) {  //获取鼠标点击div时的坐标  var mousedownX = event.clientX  var mousedownY = event.clientY  //获取div距离...
  • JS实现拖动div层移动

    2014-04-26 22:57:00
    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别---- pageX,pageY,layerX,layerY,clientX,clientY,screenX,screenY,offsetX之间的区别! PageX: 鼠标在页面上的位置,从页面...
  • div id="title" style="" class="top">这是标题</div> 这是内容</div> <script type="text/javascript"> var posX; var posY; fdiv = document.getElementById("f"); document....
  • 鼠标拖动div

    千次阅读 2011-11-03 15:15:31
    今天没什么工作,想着复习下js中获取元素的位置属性的东西,这些地方我一直很混乱,分不清,今天学习了下,写了个鼠标拖动div层的例子(目前只能在ie下运行),ff下获取事件源跟鼠标坐标的方式跟ie不同,有时间学习...
  • 实现用鼠标拖动div块的移动,当鼠标点击哪个块时,鼠标移动,div也跟着移动,鼠标松开时,则停止移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
  • Document  div{  width:200px;  height:200px;  background:red;  }       document.getElementById('oblong').onmousedown=function(){  var ob
  • js鼠标拖动事件

    2020-02-03 10:34:41
    html及css样式 <div id="box"></div> *{padding: 0;margin: 0;} #box{ width: 100px; height: 100px; background: #FFC0CB;...js实现拖动效果 box.onclick=fu...
  • js 实现鼠标拖动div

    千次阅读 2013-01-14 21:28:32
    var mouseX, mouseY; var objX, objY; var isDowm = false; //是否按下鼠标 function mouseDown(obj, e) { obj.style.cursor = "move"; objX = div1.style.left;
  • 原生JS鼠标拖动元素

    2020-03-17 15:07:05
    文章目录一、关于拖拽过程分析二、具体实现三、新学的知识点 一、关于拖拽过程分析 1.鼠标按下时,开始拖拽 onmousedown ...本质上就是拖动div元素,只不过加上了CSS样式 body代码 <body> <div class=...
  • 鼠标拖动(js封装类,javascript,鼠标拖动,drag,div)
  • 鼠标拖动DIV,有没有封装好了的JS库。 今天做了个功能是鼠标拖动DIV,从后台加载数据到前台展示。 自己用纯JQ 写了个,感觉好麻烦,有没有已经封装好了的这种JS的库文件,可以让以后的开发快速点? ...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 270
精华内容 108
关键字:

js鼠标拖动div