拖拽

最新推荐文章于 2024-08-12 11:38:38 发布

magicfly9527

最新推荐文章于 2024-08-12 11:38:38 发布

阅读量428

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/magicfly9527/article/details/51086026

版权

js 专栏收录该内容

28 篇文章

订阅专栏

setCapture()可以用在对DIV的拖动效果上。就不用给body设置onmousemove事件了，直接给DIV设置，然后通过setCapture()让它捕获所有的鼠标事件。 
不过setCapture()方法，只有IE支持。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
	
	var aInput = document.getElementsByTagName('input');
	
	aInput[0].setCapture();	//设置全局捕获 ，当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发
	
	/*
	ie : 有，并且有效果
	ff : 有，但是没效果
	chrome : 没有
	*/
	
	aInput[0].onclick = function() {
		alert(1);
	}
	
	aInput[1].onclick = function() {
		alert(2);
	}
	
}
</script>
</head>

<body>
	<input type="button" value="按钮一" />
    <input type="button" value="按钮二" />
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#img1 { position: absolute;}
</style>
<script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var oImg = document.getElementById('img1');
	
	drag(oImg);
	
	drag(oDiv);
	
	function drag(obj) {
		
		obj.onmousedown = function(ev) {
			var ev = ev || event;
			
			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;
			
			if ( obj.setCapture ) {
				obj.setCapture();
			}
			
			document.onmousemove = function(ev) {
				var ev = ev || event;
				
				var L = ev.clientX - disX;
				var T = ev.clientY - disY;
				
				if ( L < 100 ) {
					L = 0;
				} else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) {
					L = document.documentElement.clientWidth - obj.offsetWidth;
				}
				
				if ( T < 0 ) {
					T = 0;
				} else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) {
					T = document.documentElement.clientHeight - obj.offsetHeight;
				}
				
				obj.style.left = L + 'px';
				obj.style.top = T + 'px';
				
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				if ( obj.releaseCapture ) {
					obj.releaseCapture();
				}
			}
			
			return false;
			
		}
		
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
    <img src="1.jpg" id="img1" />
</body>
</html>

JQ版

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上古战神36小时冲级大唐无双活动</title>
<script src="http://yygame.duowan.com/Web/Public/Jcode/js/jquery.min.js"></script>
<style>
  

  #div1{ width: 200px; height: 200px; background: green; position: fixed; left: 0; top: 0;}

  #div2{ width: 200px; height: 200px; background: red; position: fixed; left: 100px; top: 100px;}
  body{
    height: 2000px;
  }

</style>
<script>
$.fn.drag = function(opt){

  var defaults = {

  }
  var settings = $.extend({},defaults,opt)
  return this.each(function(){
    var $ele = $(this);
    var oEle = $ele[0];
    var disX = 0;
    var disY = 0;
    $ele.on('mousedown',function(ev){
      var st = $(window).scrollTop();
      var sl = $(window).scrollLeft();
      disX = ev.pageX +sl - $ele.offset().left;
      disY = ev.pageY + st - $ele.offset().top;
      if(oEle.setCapture ) {  
          oEle.setCapture();  
      }  
      $(document).on('mousemove.drag',function(ev){
        var l =  ev.pageX - disX;
        var t = ev.pageY - disY;
        if(l> $(window).width()-$ele.outerWidth()){
          l = $(window).width()-$ele.outerWidth();
        }
        if(l< 0){
          l = 0;
        }
        if(t>$(window).height()-$ele.outerHeight()){
          t =$(window).height()-$ele.outerHeight();
        }
        if(t < 0){
          t = 0;
        }
        $ele.css({
          left: l,
          top: t
        })
      })

      $(document).on('mouseup.drag',function(ev){
        $(document).off('mouseup.drag');
        $(document).off('mousemove.drag')
        if ( oEle.releaseCapture ) {  
          oEle.releaseCapture();  
        } 
      })
      return false;
    })
  })
}

</script>
</head>
<body>
<div id="div1">111</div>

<div id="div2">111</div>


<script>
  $('#div1').drag();

  $('#div2').drag();

</script>
    
</body>
</html>