【完美解决方案】控制div拖拽范围,让层在范围内拖动,不拖拽出边界值

2019独角兽企业重金招聘Python工程师标准>>>

【完美解决方案】控制div拖拽范围,让层在范围内拖动,不拖拽出边界值：

        var XNew = e.pageX;
        var YNew = e.pageY;
        var pageXOld = this.options.event.pageX;
        var pageYOld = this.options.event.pageY;
        var leftOld = this.options.oleft;
        var topOld = this.options.otop;
        var leftNew = leftOld + XNew - pageXOld;
        var topNew = topOld + YNew - pageYOld;
        var selfWidth = this.$element[0].offsetWidth;
        var selfHeight = this.$element[0].offsetHeight;
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        if(leftNew > (windowWidth - selfWidth)){
      	    this.$element.css('left', windowWidth - selfWidth);
      	    return;
        }
        if(topNew > (windowHeight - selfHeight)){
        	this.$element.css('top', windowHeight - selfHeight);
        	return;
        }
        if(leftNew < 0){
        	this.$element.css('left', 0);
        	return;
        }
        if(topNew < 0){
        	this.$element.css('top', 0);
        	return;
        }

上面的代码只是我项目代码中的一个片段，提供一个思路。

如果理解有困难？没有关系！下面可以附上完整的一个demo！激动吧！！

【提示：下面链接打开后为演示页面，可以按F12查看drag.js文件源码】

demo地址：http://www.jq22.com/demo/jQuery-tddx20161230/

转载于:https://my.oschina.net/u/3047936/blog/1499840