【完美解決方案】控制div拖拽範圍,讓層在範圍內拖動,不拖拽出邊界值

【完美解決方案】控制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/