具体代码如下所示：
//HTML部分 <div></div> <div> <div><div>弹出框</div><div></div></div> <div></div> <div> <div> <div>确定</div> <div>取消</div> </div> </div> </div> //CSS部分 .wrap { position: fixed; left: 0; top: 0; background-color: #000; z-index: 10000; opacity: 0.3; } .popUpBox { height: 400px; width: 700px; position: absolute; overflow: hidden; box-sizing: border-box; z-index: 10000; background-color: #fff; border-radius: 2px; box-shadow: 1px 1px 50px rgba(0,0,0,.3); } .layer-head { width: 100%; height: 35px; border-bottom: 1px solid #eee; box-sizing: border-box; background-color: #f8f8f8; border-radius: 4px 4px 0 0; cursor: move; } .layer-head-text { padding-left: 20px; font-size: 14px; color: #333; height: 35px; line-height: 34px; float: left; } .layer-close { float: right; width: 16px; height: 16px; background-image: url(../images/close_hover.png); background-repeat:no-repeat; background-size:100% 100%; position: absolute; top: 10px; right: 12px; cursor: pointer; } .layer-body { width: 100%; height: calc(100% - 73px); } .layer-footer { width: 100%; height: 38px; border-top: 1px solid #eee; box-sizing: border-box; background-color: #f8f8f8; border-radius: 0 0 4px 4px; } .layer-footer-button-group { padding: 5px 0 5px 576px; height: 28px; } .layer-footer-button { width: 56px; height: 28px; line-height: 28px; margin-right: 6px; box-sizing: border-box; font-size: 12px; float: left; text-align: center; cursor: pointer; } .layer-sure { border: 1px solid #4898d5; background-color: #2e8ded; color: #fff; } .layer-cancel { border: 1px solid #dedede; background-color: #f1f1f1; color: #333; } //点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动) $(document).on('mousedown', '.layer-head', function(e) { e = e || window.event; //兼容ie浏览器 var drag = $(this).parent(); $('body').addClass('select'); //webkit内核和火狐禁止文字被选中 document.body.onselectstart = document.body.ondrag = function() { //ie浏览器禁止文字选中 return false; } if ($(e.target).hasClass('layer-close')) { //点关闭按钮不能拖拽模态框 return; } var diffX = e.clientX - drag.offset().left; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离 var diffY = e.clientY - drag.offset().top; $(document).on('mousemove', function(e) { e = e || window.event; //兼容ie浏览器 var left = e.clientX - diffX; var top = e.clientY - diffY; if (left < 0) { left = 0; } else if (left > window.innerWidth - drag.width()) { left = window.innerWidth - drag.width(); } if (top < 0) { top = 0; } else if (top > window.innerHeight - drag.height()){ top = window.innerHeight - drag.height(); } //移动时重新得到物体的距离，解决拖动时出现晃动的现象 drag.css({ 'left': left + 'px', 'top': top + 'px' }); }); $(document).on('mouseup', function(e) { //当鼠标弹起来的时候不再移动 $(document).unbind("mousemove"); $(document).unbind("mouseup"); }); });
总结
以上所述是小编给大家介绍的js实现弹出框的拖拽效果实例代码详解 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: