elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problema con muestreo de DIVS con JQuery
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Problema con muestreo de DIVS con JQuery  (Leído 1,833 veces)
zikotik

Desconectado Desconectado

Mensajes: 59



Ver Perfil
Problema con muestreo de DIVS con JQuery
« 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:




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)



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

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

MOD: Imágenes adpatadas a lo permitido.


« Última modificación: 30 Noviembre 2016, 15:28 pm por MCKSys Argentina » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Problema con jquery
Desarrollo Web
skdna 3 2,653 Último mensaje 8 Noviembre 2010, 17:52 pm
por bizco
Pequeño problema con jQuery
Desarrollo Web
octavioxd 4 3,534 Último mensaje 16 Noviembre 2010, 10:26 am
por marko1985
Problema al maquetar con 2 Divs
Desarrollo Web
soru13 2 1,881 Último mensaje 23 Febrero 2013, 20:11 pm
por soru13
Problema al insertar iframes en DIVS
Desarrollo Web
genericobro 7 3,324 Último mensaje 10 Marzo 2015, 15:27 pm
por MinusFour
Problema de muestreo de memoria en el administrador
Windows
RiasChan 5 2,960 Último mensaje 21 Abril 2017, 04:49 am
por Randomize
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines