[TimLinux] JavaScript 模态框可拖动功能实现——jQuery版
Posted timlinux
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[TimLinux] JavaScript 模态框可拖动功能实现——jQuery版相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery - Drag</title> <style> .modal position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(100, 100, 100, 0.5); z-index: 2001; .modal-content position: absolute; width: 500px; height: 300px; left: 50%; margin-left: -250px; margin-top: 100px; border: 10px solid rgba(150, 150, 150, 0.5); background-color: white; text-align: center; .modal-title height: 38px; border-bottom: 1px solid blue; text-align: left; padding: 0 10px; font-weight: bold; cursor: move; .modal-title div display: inline-block; font-size: larger; line-height: 2; padding: 0 8px; .modal-title .modal-close float: right; cursor: pointer; .modal-title .modal-close:hover background-color: rgb(198, 236, 236); </style> </head> <body> <div> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> <p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p> </div> <div id="idModal" class="modal"> <div id="idModalDetail" class="modal-content"> <div id="idModalTitle" class="modal-title"> <div>可拖动</div> <div class="modal-close">X</div> </div> <div class="modal-body">This is drag modal</div> </div> </div> <script type="text/javascript" src="./jquery-2.2.4.js"></script> <script> // 拖动时，偶发选中文本，将该选择功能禁用 function cancelUserSelect(ele) if (!ele) return false; document.body.style.userSelect = ‘none‘; document.body.style.webkitUserSelect = ‘none‘; document.body.style.msUserSelect = ‘none‘; document.body.style.mozUserSelect = ‘none‘; ele.style.userSelect = ‘none‘; ele.style.webkitUserSelect = ‘none‘; ele.style.msUserSelect = ‘none‘; ele.style.mozUserSelect = ‘none‘; // 恢复禁用的文本选择功能 function restoreUserSelect(ele) if (!ele) return false; document.body.style.userSelect = ‘text‘; document.body.style.webkitUserSelect = ‘text‘; document.body.style.msUserSelect = ‘text‘; document.body.style.mozUserSelect = ‘text‘; ele.style.userSelect = ‘text‘; ele.style.webkitUserSelect = ‘text‘; ele.style.msUserSelect = ‘text‘; ele.style.mozUserSelect = ‘text‘; function drag() var $idModalTitle = $(‘#idModalTitle‘); var $idDragModal = $idModalTitle.parent(); var mouseStartPoint = left: 0, top: 0; var mouseEndPoint = left: 0, top: 0; var oldPoint = left: 0, top: 0; var isDraging = false; $(document).on(‘mousedown‘, ‘.modal-title‘, function(e) // 关闭按钮不进行移动 if ($(e.target).hasClass(‘modal-close‘)) return false; isDraging = true; mouseStartPoint = left: e.clientX, top: e.clientY; oldPoint = $idDragModal.offset(); // 鼠标离模态框边距值 cancelUserSelect($idDragModal.get(0)); ); $(document).on(‘mousemove‘, function(e) if (!isDraging) return false; if ($idDragModal.css(‘margin-left‘) !== 0) $idDragModal.css(‘margin-left‘, 0); if ($idDragModal.css(‘margin-top‘) !== 0) $idDragModal.css(‘margin-top‘, 0); var mouseX = e.clientX; var mouseY = e.clientY; if (mouseX < 0) mouseX = 0; if (mouseY < 0) mouseY = 25; mouseEndPoint = left: mouseX, top: mouseY; var newPoint = left: mouseEndPoint.left - (mouseStartPoint.left - oldPoint.left), top: mouseEndPoint.top - (mouseStartPoint.top - oldPoint.top) ; $idDragModal.offset(newPoint); ); $(document).on(‘mouseup‘, function(e) if (!isDraging) return false; isDraging = false; restoreUserSelect($idDragModal.get(0)); ); drag(); </script> </body> </html>
以上是关于[TimLinux] JavaScript 模态框可拖动功能实现——jQuery版的主要内容，如果未能解决你的问题，请参考以下文章
[TimLinux] JavaScript 中循环执行和定时执行
bootstrap模态框内的表格javascript input radio单选取值问题