Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: zikotik en 30 Noviembre 2016, 15:22 pm


Título: Problema con muestreo de DIVS con JQuery
Publicado por: zikotik en 30 Noviembre 2016, 15:22 pm
Hola gente, muy buenas tardes. Estoy desarrollando el nuevo sistema para la empresa en la que trabajo, y si bien tengo experiencia en JQuery y PHP, es la primera vez que tengo un problema con JQuery para programar un con contextmenu().

El problema radica en lo siguiente:
Tengo 2 árboles de directorios (rojo y azul). El árbol rojo contiene todos los archivos de un cliente, mientras que el árbol azul es algo así como una caja a donde un administrador puede pasar las cosas del árbol rojo hacia el azul para poder después facturarlas y cobrarle al cliente.

La cuestión es que no hay ni puede haber botones directos en pantalla para este tipo de cosas, sino que para pasar las cosas de un lado a otro, se maneja con el botón derecho del mouse.

Les dejo una imagen de muestra:

(https://k60.kn3.net/ACC227A9C.png)
(https://k60.kn3.net/8A4D834E5.png)

Qué sucede?, cuando quiero quitar un archivo de la caja azul, me aparece el mismo div que aparece cuando doy click derecho sobre la caja roja, y en realidad no debería suceder éso, sino que se tendría que mostrar otro div con otras opciones.

(Imagen de lo que sucede)

(https://k60.kn3.net/1B432BDE8.png)

Finalmente, les dejo el código del archivo PHP.
Espero puedan darme una mano. Muchas gracias de antemano!

Código
  1. <?php
  3.  
  4.     if(!isset($_SESSION["session"])){
  5.         header("location: ../login.php");
  6.     }
  7.  
  8.     include("serverconfig.php");
  9.     include("detectar_archivo.php");
  10.  
  11.     $cliente_id = $_POST["cliente"];
  12.     $sql = "SELECT * FROM `usuarios` WHERE `id` LIKE ".$cliente_id;
  13.     $query = mysql_query($sql);
  14.     while($data = mysql_fetch_assoc($query)){
  15.     	$nombre_cliente = $data["nombre"];
  16.     }
  17.  
  18.     function archivosCliente($cliente){
  19.     	// BASE DE DATOS VIEJA
  20. 	    $sql = "SELECT * FROM `archivos` WHERE `usuario_id` LIKE ".$cliente." AND `deleted` LIKE '0' ORDER BY `tipo`";
  21. 	    $query = mysql_query($sql);
  22. 	    $last_folder = "";
  23. 	    while($data = mysql_fetch_assoc($query)){
  24. 	    	if($last_folder != $data["tipo"]){
  25. 	    		$last_folder = $data["tipo"];
  26. 	    		echo '<div class="folder" folder-type="'.$data["tipo"].'" no-select><i class="fa fa-folder"></i>&nbsp; '.detectFile($data["tipo"])."</div>";
  27. 	    	}
  28. 	    	if($data["nombre"] == ""){$data["nombre"] = "Archivo ".$data["id"];}
  29. 	    	echo '<div class="file" file-id="'.$data["id"].'" pdf="'.$data["path"].'" db-age="old" file-type="'.$data["tipo"].'" no-select><i class="fa fa-file"></i>&nbsp; '.$data["nombre"]."</div>";
  30. 	    }
  31.     	// BASE DE DATOS NUEVA
  32. 	    $sql = "SELECT * FROM `archivos_pdf` WHERE `cliente_id` LIKE ".$cliente." AND `papelera` LIKE '0' ORDER BY `tipo`";
  33. 	    $query = mysql_query($sql);
  34. 	    $last_folder = "";
  35. 	    while($data = mysql_fetch_assoc($query)){
  36. 	    	if($last_folder != $data["tipo"]){
  37. 	    		$last_folder = $data["tipo"];
  38. 	    		echo '<div class="folder" folder-type="'.$data["tipo"].'" no-select><i class="fa fa-folder"></i>&nbsp; '.detectFile($data["tipo"])."</div>";
  39. 	    	}
  40. 	    	if($data["nro_expediente"] == ""){$data["nro_expediente"] = "Archivo ".$data["id"];}
  41. 	    	echo '<div class="file" file-id="'.$data["id"].'" pdf="'.$data["pdf"].'" db-age="new" file-type="'.$data["tipo"].'" no-select><i class="fa fa-file"></i>&nbsp; '.$data["nro_expediente"]."</div>";
  42. 	    }
  43.     }
  44. ?>
  45.  
  46. <style type="text/css">
  47. 	[no-select] {
  48. 		-webkit-user-select: none;
  49. 		-khtml-user-select: none;
  50. 		-moz-user-select: none;
  51. 		-o-user-select: none;
  52. 		user-select: none;
  53. 	}
  54. 	.toggle-tips {
  55. 		cursor: pointer;
  56. 		margin: 0px 20px 25px;
  57. 		padding: 10px;
  58. 		box-sizing: border-box;
  59. 		transition-duration: 0.25s;
  60. 	}
  61. 	.toggle-tips:hover {
  62. 		background: #ececec;
  63. 	}
  64. 	.toggle-tips:active {
  65. 		transition-duration: 0s;
  66. 		background: #659be0;
  67. 		color: #fff;
  68. 	}
  69. 	.toggle-tips:active i {
  70. 		color: #fff;
  71. 	}
  72. 	.fa-exclamation-circle {
  73. 		color: #659be0;
  74. 	}
  75. 	.archivos-cliente .portlet-body, .archivos-ot .portlet-body {
  76. 		height: 300px;
  77. 		max-height: 300px;
  78. 		overflow-y: auto;
  79. 	}
  80. 	.folder i {
  81. 		color: #F1C40F;
  82. 	}
  83. 	.file i {
  84. 		margin-left: 20px;
  85. 		color: #659be0;
  86. 	}
  87. 	.ot-tree .file i {
  88. 		color: #e7505a;
  89. 	}
  90. 	.file {
  91. 		cursor: pointer;
  92. 		display: none;
  93. 	}
  94. 	.folder, .file {
  95. 		cursor: pointer;
  96. 		padding: 10px;
  97. 		font-size: 18px;
  98. 		transition-duration: 0.25s;
  99. 	}
  100. 	.folder:hover {
  101. 		background: #ececec;
  102. 	}
  103. 	.context-cliente, .context-ot {
  104. 		z-index: 9994;
  105. 		cursor: pointer;
  106. 		display: none;
  107. 		position: absolute;
  108. 		padding: 0px;
  109. 		background: #000;
  110. 		box-shadow: 0px 10px 35px 0px rgba(0,0,0,.65);
  111. 	}
  112. 	.context-cliente .opt, .context-ot .opt {
  113. 		padding: 10px;
  114. 		box-sizing: border-box;
  115. 		width: 250px;
  116. 		color: #fff;
  117. 		background: #111;
  118. 	}
  119. 	.context-cliente .opt:hover, .context-ot .opt:hover {
  120. 		transition-duration: 0.25s;
  121. 		background: #88a22a;
  122. 	}
  123. 	.context-cliente .opt:active, .context-ot .opt:active {
  124. 		transition-duration: 0s;
  125. 		background: #fff;
  126. 		color: #88a22a;
  127. 	}
  128. 	[author] {
  129. 		font-size: 13px;
  130. 		font-style: italic;
  131. 		color: rgba(0,0,0,.45);
  132. 	}
  133. </style>
  134.  
  135. <script type="text/javascript">
  136. 	$(function(){
  137. 		function unselectFiles(){
  138. 			$(".file").removeAttr("file-active");
  139. 			$(".file").css({
  140. 				"background" : "none"
  141. 			});
  142. 		}
  143. 		$(".toggle-tips").on("click", function(){
  144. 			$(".note-success").show();
  145. 			$(this).hide();
  146. 		});
  147. 		$(".note-success").on("click", function(){
  148. 			$(".toggle-tips").show();
  149. 			$(this).hide();
  150. 		});
  151. 		var folder = 0;
  152. 		$(".folder").on("click", function(){
  153. 			var type = $(this).attr("folder-type");
  154. 			$(".archivos-cliente .file[file-type="+type+"]").toggle();
  155. 		});
  156. 		$(".file").on("mouseover", function(){
  157. 			if($(this).attr("file-active") != 1){
  158. 				$(this).css({
  159. 					"background" : "#ececec"
  160. 				});
  161. 			}
  162. 		});
  163. 		$(".file").on("mouseleave", function(){
  164. 			if($(this).attr("file-active") != 1){
  165. 				$(this).css({
  166. 					"background" : "none"
  167. 				});
  168. 			}
  169. 		});
  170. 		$("html").click(function(){
  171. 			unselectFiles();
  172. 			$(".context-cliente, .context-ot").hide();
  173. 			$(".file").removeAttr("file-active");
  174. 		});
  175. 		$(".file").contextmenu(function(e){
  176. 			unselectFiles();
  177. 			$(this).attr("file-active","1");
  178. 			$(".buffer-temp").html("");
  179. 			$(this).css({
  180. 				"background" : "#ececec"
  181. 			});
  182. 		});
  183. 		$(".archivos-cliente .file").contextmenu(function(e){
  184. 			$(".context-ot").css({
  185. 				"display" : "none"
  186. 			});
  187. 			$(".context-cliente").css({
  188. 				"display" : "block",
  189. 				"left" : + e.pageX + 2 + "px",
  190. 				"top" : + e.pageY - 50 + "px"
  191. 			});
  192. 		});
  193. 		$(".archivos-ot .file").contextmenu(function(e){
  194. 			$(".context-cliente").css({
  195. 				"display" : "none"
  196. 			});
  197. 			$(".context-ot").css({
  198. 				"display" : "block",
  199. 				"left" : + e.pageX + 2 + "px",
  200. 				"top" : + e.pageY - 50 + "px"
  201. 			});
  202. 		});
  203. 		$(".opt-add").on("click", function(){
  204. 			$(".archivos-cliente .file[file-active]").appendTo(".buffer-temp");
  205. 			var user = $(".username").text().trim();
  206. 			$(".buffer-temp .file").append('&nbsp;<span author="' + user + '">(' + user + ")</span>");
  207. 			$(".buffer-temp .file").appendTo(".ot-tree");
  208. 			$(".buffer-temp").html("");
  209. 			unselectFiles();
  210. 		});
  211. 	});
  212. </script>
  213.  
  214. <div class="buffer-temp" hidden="hidden"></div>
  215.  
  216. <div class="toggle-tips" no-select><i class="fa fa-exclamation-circle"></i>&nbsp; Ver tips informativos...</div>
  217.  
  218. <div class="context-cliente" no-select><div class="opt opt-read">Ver Archivo</div><div class="opt opt-add">Agregar a Orden de Trabajo</div></div>
  219.  
  220. <div class="context-ot" no-select><div class="opt opt-read">Ver Archivo</div><div class="opt opt-remove">Quitar de Orden de Trabajo</div></div>
  221.  
  222. <div class="row" style="padding: 0px 20px 0px 20px;">
  223.  
  224. 	<div class="note note-success" hidden="hidden" style="cursor: pointer; margin: 0px 15px 20px 15px;">
  225. 		<p><b>&bullet;</b> Para <u>ver el archivo anexado</u>, haga <b>Click Derecho</b> sobre &nbsp;<i class="fa fa-file"></i>&nbsp; y a continuaci&oacute;n pulse la opci&oacute;n <b>Ver Archivo</b>.</p>
  226. 		<p><b>&bullet;</b> Para <u>pasar un archivo</u> a la orden de trabajo, haga <b>Click Derecho</b> sobre &nbsp;<i class="fa fa-file"></i>&nbsp; y a continuaci&oacute;n pulse la opci&oacute;n <b>Agregar a Orden de Trabajo</b>.</p>
  227. 		<p><b>&bullet;</b> Para <u>quitar un archivo</u> de la orden de trabajo, haga <b>Click Derecho</b> sobre &nbsp;<i class="fa fa-file"></i>&nbsp; y a continuaci&oacute;n pulse la opci&oacute;n <b>Quitar de Orden de Trabajo</b>.</p>
  228. 	</div>
  229.  
  230. 	<!-- ARCHIVOS DE CLIENTE -->
  231. 	<div class="col-md-6 archivos-cliente" height="300px">
  232. 	    <div class="portlet red box">
  233. 	        <div class="portlet-title">
  234. 	            <div class="caption">
  235. 	                Archivos de <?php echo $nombre_cliente;?>
  236. 	            </div>
  237. 	        </div>
  238. 	        <div class="portlet-body">
  239. 	            <?php archivosCliente($cliente_id);?>
  240. 	        </div>
  241. 	    </div>
  242. 	</div>
  243.  
  244. 	<!-- ARCHIVOS DE OT -->
  245. 	<div class="col-md-6 archivos-ot">
  246. 	    <div class="portlet blue-madison box">
  247. 	        <div class="portlet-title">
  248. 	            <div class="caption">
  249. 	                Contenido de Orden de Trabajo
  250. 	            </div>
  251. 	        </div>
  252. 	        <div class="portlet-body ot-tree">
  253. 	        	<!-- ARCHIVOS AGREGADOS A ORDENES DE OT -->
  254. 	        </div>
  255. 	    </div>
  256. 	</div>
  257.  
  258. </div>

MOD: Imágenes adpatadas a lo permitido.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines