001.<?php
002.require 'config/show-error.php';
003.?>
004.<!DOCTYPE html>
005.<html lang="en">
006. <head>
007. <meta charset="utf-8">
008. <meta http-equiv="X-UA-Compatible" content="IE=edge">
009. <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
010. <title></title>
011.
012. <!-- Bootstrap -->
013. <link rel="stylesheet" href="styles/css/bootstrap.min.css">
014. <link rel="stylesheet" href="styles/font-awesome-4.6.3/css/font-awesome.min.css">
015.
016. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
017. <!-- WARNING: Respond.js doesn't work if you view the page via file:
018. <!--[if lt IE 9]>
021. <![endif]-->
022.
023. <link rel="stylesheet" href="styles/css/non-responsive.css" />
024.
025. <!-- jQuery-UI CSS -->
026. <script src="styles/jquery-ui/jquery-ui.css"></script>
027.
028. <style type="text/css">
029. ul li {
030. min-width: 200px;
031. }
032. .dragging li.ui-state-hover {
033. min-width: 240px;
034. }
035. .dragging .ui-state-hover a {
036. color:green !important;
037. font-weight: bold;
038. }
039. th,td {
040. padding: 2px 4px;
041. border: 1px solid;
042. }
043. .connectedSortable tr, .ui-sortable-helper {
044. cursor: move;
045. }
046. .connectedSortable tr:first-child {
047.
048. cursor: move;
049. }
050. .ui-sortable-placeholder {
051. background: yellow;
052. }
053.
054. div.tableScroll {
055. position: fixed;
056. }
057. </style>
058. </head>
059. <body>
060. <div class="container">
061. <div class="row">
062. <div class="col-xs-6">
063. <table id="table1" class="table table-bordered table-condensed">
064. <tbody>
065. <tr>
066. <td>
067. <table id="table-droppable1" class="table table-bordered table-condensed">
068. <thead>
069. <tr>
070. <th colspan="3" class="text-center">Section 1</th>
071. </tr>
072. <tr>
073. <th class="text-center">#</th>
074. <th class="text-center">Color</th>
075. <th class="text-center">Value</th>
076. </tr>
077. </thead>
078. <tbody class="connectedSortable">
079. <tr>
080. <td class="text-center">1.1</td>
081. <td class="text-center">Red</td>
082. <td class="text-center">3</td>
083. </tr>
084. <tr>
085. <td class="text-center">1.2</td>
086. <td class="text-center">White</td>
087. <td class="text-center">3</td>
088. </tr>
089. <tr>
090. <td class="text-center">1.3</td>
091. <td class="text-center">Blue</td>
092. <td class="text-center">3</td>
093. </tr>
094. </tbody>
095. <tfoot>
096. <tr id="sum1">
097. <td colspan="2" class="text-center">Sum Section 1</td>
098. <td class="text-center">9</td>
099. </tr>
100. </tfoot>
101. </table>
102. <table id="table-droppable2" class="table table-bordered table-condensed">
103. <thead>
104. <tr>
105. <th colspan="3" class="text-center">Section 2</th>
106. </tr>
107. <tr>
108. <th class="text-center">#</th>
109. <th class="text-center">Color</th>
110. <th class="text-center">Value</th>
111. </tr>
112. </thead>
113. <tbody class="connectedSortable">
114. <tr>
115. <td class="text-center">1.1</td>
116. <td class="text-center">White</td>
117. <td class="text-center">3</td>
118. </tr>
119. <tr>
120. <td class="text-center">1.2</td>
121. <td class="text-center">Red</td>
122. <td class="text-center">3</td>
123. </tr>
124. </tbody>
125. <tfoot>
126. <tr id="sum2">
127. <td colspan="2" class="text-center">Sum Section 2</td>
128. <td class="text-center">6</td>
129. </tr>
130. </tfoot>
131. </table>
132. </td>
133. </tr>
134. </tbody>
135. </table>
136. </div>
137. <div class="col-xs-6">
138. <table id="table-draggable" class="table table-bordered table-condensed">
139. <thead>
140. <tr>
141. <th class="text-center">#</th>
142. <th class="text-center">Color</th>
143. <th class="text-center">Value</th>
144. </tr>
145. </thead>
146. <tbody class="connectedSortable">
147. <tr>
148. <td class="text-center">2.1</td>
149. <td class="text-center">Green</td>
150. <td class="text-center">1</td>
151. </tr>
152. <tr>
153. <td class="text-center">2.2</td>
154. <td class="text-center">Black</td>
155. <td class="text-center">2</td>
156. </tr>
157. <tr>
158. <td class="text-center">2.3</td>
159. <td class="text-center">Orange</td>
160. <td class="text-center">4</td>
161. </tr>
162. <tr>
163. <td class="text-center">2.4</td>
164. <td class="text-center">Yellow</td>
165. <td class="text-center">5</td>
166. </tr>
167. </tbody>
168. </table>
169. </div>
170. </div>
171. </div>
172.
173. <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
174. <script src="styles/js/jquery-3.1.1.js"></script>
175. <!-- Include all compiled plugins (below), or include individual files as needed -->
176. <script src="styles/js/bootstrap.min.js"></script>
177. <!-- jQuery-UI JS -->
178. <script src="styles/jquery-ui/jquery-ui.min.js"></script>
179.
180. <script type="text/javascript">
181. $(document).ready(function() {
182.
183. var $tabs = $('#table-draggable');
184.
185. $( "tbody.connectedSortable" ).sortable({
186. connectWith: ".connectedSortable",
187. appendTo: $tabs,
188. helper: "clone",
189.
190. zIndex: 99999,
191. stop: function(event, ui){
192. var drag_value = $(this).data().uiSortable.currentItem.closest('tr').find('td:eq(2)').text();
193. var drop_value = $(this).data().uiSortable.currentItem.closest('#sum1').find('td:eq(1)').text();
194. alert(drop_value);
195.
196. console.log(drop_value);
197. }
198. }).disableSelection();
199.
200. $( ".nav-tabs > li", $tabs ).droppable({
201. accept: ".connectedSortable tr",
202. hoverClass: "ui-state-hover",
203. drop: function(event, ui) {
204. return false;
205. }
206. });
207.
208. });
209. </script>
210. </body>
211.</html>
