jq弹窗拖动改变宽高

预览效果

<div class='tishiMask'><div class="tishiEm"><div id="coor"></div><div class="topNew ismove"><span class="ismove">提示</span><p onclick="closeTishi()">×</p></div><div class="bottomNew"><p>提示文字软件</p><div class="newDesignBtn"><input type="button" value="确定" class="btnLeft" onclick="closeTishi()" ><input type="button" value="取消" onclick="closeTishi(this)" class="btnRight"></div></div></div>
</div>

.tishiMask{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0, 0, 0, .18);display: block;z-index: 99999;
}
.tishiEm {z-index: 99999;/* display: none; *//* -webkit-transition: -webkit-box-shadow .2s; *//* transition: box-shadow .2s; */position: fixed;height: 220px;width: 300px;top: 38%;/* margin-top: -100px; */left: 43%;/* margin-left: -150px; */background: #fff;border-radius: 5px 5px 0px 0px;-webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.4);box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.4);/* -webkit-transition: -webkit-box-shadow .2s; *//* transition: box-shadow .2s; *//* transition: all .4s; *//* -webkit-transition: all .4s; *//* -moz-transition: all .4s; */
}.tishiEm .topNew {overflow: hidden;background-image: linear-gradient(183deg, #3d95ea 0%, #70b0e6 100%);border-radius: 5px 5px 0px 0px;
}.tishiEm .topNew span {color: #fff;font-size: 12px;height: 34px;line-height: 34px;display: block;float: left;margin-left: 10px;
}.tishiEm .topNew p {float: right;color: #fff;font-size: 20px;height: 34px;line-height: 34px;display: block;margin-right: 10px;cursor: pointer;
}.tishiEm .bottomNew {margin: 0px 0px;
}.tishiEm .bottomNew {text-align: center;
}.tishiEm .bottomNew p {font-size: 12px;height: 20px;line-height: 20px;
}
.tishiEm .bottomNew .newDesignBtn {overflow: hidden;width: 100%;height: auto;display: flex;justify-content: flex-end;align-items: center;position: absolute;bottom: 10px;left: 0;
}.tishiEm .bottomNew .newDesignBtn .btnLeft {display: block;float: left;box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.22);background: #5da2e5;color: #fff;font-size: 12px;width: auto;text-align: center;height: 24px;line-height: 24px;border-radius: 4px;border: none;cursor: pointer;padding: 0px 14px;border: 1px solid #5da2e5;
}.tishiEm .bottomNew .newDesignBtn .btnLeft:hover {background: #1a78d9;border: 1px solid #0069b8;color: #fff;
}.tishiEm .bottomNew .newDesignBtn .btnRight {display: block;float: left;box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.22);background: #dcdcdc;color: #383838;font-size: 12px;width: auto;text-align: center;height: 24px;line-height: 24px;border-radius: 4px;margin-right: 28px;margin-left: 10px;border: none;cursor: pointer;padding: 0px 14px;border: 1px solid #dcdcdc;
}.tishiEm .bottomNew .newDesignBtn .btnRight:hover {background: #c4c4c4;color: #383838;border: 1px solid #aaa;
}
#coor, #coor_set, #coor_syt {width: 20px;height: 20px;overflow: hidden;cursor: se-resize;position: absolute;right: 0;bottom: 0;/* background-color: #09c; */background: url(./../images/scale.png);background-size: 100% 100%;transform: rotate(270deg);z-index: 999;
}

类名tishiEm设置宽高为缩小最小宽高。

注意下方js注释

$(function () {$(document).mousemove(function (e) {if (!!this.move_gy) {var posix_gy = !document.move_target_gy ? { 'x': 0, 'y': 0 } : document.move_target_gy.posix_gy,callback_gy = document.call_down_gy || function () {let viewWidth = $(document).width();let maxLeft = viewWidth - $(".tishiEm").width();   // 左侧最大移动量let viewHeight = $(document).height();let maxHeight = viewHeight - $(".tishiEm").height();   // 底部最大移动量let currentTop = e.pageY - posix_gy.y;let currentLeft = e.pageX - posix_gy.x;if (currentTop <= 0 || currentLeft <= 0 || currentLeft >= maxLeft || currentTop >= maxHeight) {return} else {$(this.move_target_gy).offset({'top': currentTop,'left': currentLeft});}};callback_gy.call(this, e, posix_gy);}}).mouseup(function (e) {if (!!this.move_gy) {var callback_gy = document.call_up_gy || function () {};callback_gy.call(this, e);$.extend(this, {'move_gy': false,'move_target_gy': null,'call_down_gy': false,'call_up_gy': false});}});var $box = $('.tishiEm').mousedown(function (e) {let offset = $(this).offset();this.posix_gy = { 'x': e.pageX - offset.left, 'y': e.pageY - offset.top };if (!$(e.target).hasClass('ismove')) {      // 只允许蓝色区域可拖动return;} else {$.extend(document, { 'move_gy': true, 'move_target_gy': this });}}).on('mousedown', '#coor', function (e) {var posix_gy = {'w': $box.width(),'h': $box.height(),'x': e.pageX,'y': e.pageY};$.extend(document, {'move_gy': true, 'call_down_gy': function (e) {//下方为最小宽高  同步上方css$box.css({'width': Math.max(300, e.pageX - posix_gy.x + posix_gy.w),'height': Math.max(220, e.pageY - posix_gy.y + posix_gy.h)});}});return false;});
});