為bootstrap模態視窗新增拖拽（draggable ）事件
阿新 • • 發佈：2018-12-23
</pre><pre name="code" class="html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="bootstrap.min.css" rel="stylesheet"> <title></title> </head> <body> <!--觸發事件 --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- 模態視窗 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script src="jquery-1.11.2.min.js" type="text/javascript"></script> <!--使用者拖動元素需引入的js--> <script src="jquery-ui.min.js" type="text/javascript"></script> <!--移動裝置使用者拖動元素需引入的js--> <script src="jquery.ui.touch-punch.min.js" type="text/javascript"></script> <script src="bootstrap.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ //為模態對話方塊新增拖拽 //$(".modal-dialog").draggable(); //為模態對話方塊新增拖拽，拖拽區域只在頂部欄 $(".modal-dialog").draggable({ handle: ".modal-header" }); }) </script> </body> </html>