From 1d9fb78eb783455bfb743f3d4fa1903a949421b1 Mon Sep 17 00:00:00 2001
From: mbarki-mohamed <mbarki1234@gmail.com>
Date: Thu, 3 Oct 2013 11:52:40 +0100
Subject: [PATCH] Addition of new Draggable Modal feature using the jQuery
 draggable function

---
 index.html | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index d0369ec..62004bb 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,10 @@
   .marketing p {
     font-size: 18px;
   }
+  .drag{
+    cursor: move; 
+  
+  }
   </style>
 </head>
 <body>
@@ -117,7 +121,16 @@ <h3>Long Modals</h3>
             </div>
           </div>
           <br />
-
+          
+          <!--draggable-->
+          <div class="stackable">
+  				  <h3>Draggable</h3>
+  				  <pre class="pre-scrollable prettyprint linenums" data-source="#dragit">         
+  				  </pre>
+  				  <div class="text-center">
+  					<button class="demo btn btn-primary btn-large" data-toggle="modal" href="#dragit">View Demo</button>
+  				  </div>
+  				</div>
 		    </div>
 	    </div>
 	  </div>
@@ -192,6 +205,8 @@ <h3>Stack One</h3>
   </div>
 </div>
 
+
+
 <div id="stack2" class="modal hide fade" tabindex="-1" data-focus-on="input:first">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@@ -250,6 +265,8 @@ <h3>A Fairly Long Modal</h3>
   </div>
 </div>
 
+
+
 <div id="notlong" class="modal hide fade" tabindex="-1" data-replace="true">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@@ -281,6 +298,28 @@ <h3>A Very Long</h3>
   </div>
 </div>
 
+<div id="dragit" class="modal hide fade" tabindex="-1" data-focus-on="input:first">
+  <div class="modal-header drag">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3>Draggable Modal</h3>
+  </div>
+  <div class="modal-body">
+    <p>One fine body…</p>
+    <p>One fine body…</p>
+    <p>One fine body…</p>
+    <input type="text" data-tabindex="1" />
+    <input type="text" data-tabindex="2" />
+    <button class="btn" data-toggle="modal" href="#stack2">Launch modal</button>
+  </div>
+  <div class="modal-footer">
+    <button type="button" data-dismiss="modal" class="btn">Close</button>
+    <button type="button" class="btn btn-primary">Ok</button>
+  </div>
+</div>
+
+
+
+
 <div id="ajax-modal" class="modal hide fade" tabindex="-1"></div>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
     <script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
@@ -338,6 +377,8 @@ <h3>A Very Long</h3>
 });
 </script>
 
+
+
 <script id="ajax" type="text/javascript">
 
 var $modal = $('#ajax-modal');
@@ -366,5 +407,13 @@ <h3>A Very Long</h3>
 });
 
 </script> 
+
+ <script>
+$(function() {
+$( "#dragit" ).draggable();
+});
+</script>
+ <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+
   </body>
 </html>
