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!

<?php
	@session_start();
 
    if(!isset($_SESSION["session"])){
        header("location: ../login.php");
    }
 
    include("serverconfig.php");
    include("detectar_archivo.php");
 
    $cliente_id = $_POST["cliente"];
    $sql = "SELECT * FROM `usuarios` WHERE `id` LIKE ".$cliente_id;
    $query = mysql_query($sql);
    while($data = mysql_fetch_assoc($query)){
    	$nombre_cliente = $data["nombre"];
    }
 
    function archivosCliente($cliente){
    	// BASE DE DATOS VIEJA
	    $sql = "SELECT * FROM `archivos` WHERE `usuario_id` LIKE ".$cliente." AND `deleted` LIKE '0' ORDER BY `tipo`";
	    $query = mysql_query($sql);
	    $last_folder = "";
	    while($data = mysql_fetch_assoc($query)){
	    	if($last_folder != $data["tipo"]){
	    		$last_folder = $data["tipo"];
	    		echo '<div class="folder" folder-type="'.$data["tipo"].'" no-select><i class="fa fa-folder"></i>&nbsp; '.detectFile($data["tipo"])."</div>";
	    	}
	    	if($data["nombre"] == ""){$data["nombre"] = "Archivo ".$data["id"];}
	    	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>";
	    }
    	// BASE DE DATOS NUEVA
	    $sql = "SELECT * FROM `archivos_pdf` WHERE `cliente_id` LIKE ".$cliente." AND `papelera` LIKE '0' ORDER BY `tipo`";
	    $query = mysql_query($sql);
	    $last_folder = "";
	    while($data = mysql_fetch_assoc($query)){
	    	if($last_folder != $data["tipo"]){
	    		$last_folder = $data["tipo"];
	    		echo '<div class="folder" folder-type="'.$data["tipo"].'" no-select><i class="fa fa-folder"></i>&nbsp; '.detectFile($data["tipo"])."</div>";
	    	}
	    	if($data["nro_expediente"] == ""){$data["nro_expediente"] = "Archivo ".$data["id"];}
	    	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>";
	    }
    }
?>
 
<style type="text/css">
	[no-select] {
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
	}
	.toggle-tips {
		cursor: pointer;
		margin: 0px 20px 25px;
		padding: 10px;
		box-sizing: border-box;
		transition-duration: 0.25s;
	}
	.toggle-tips:hover {
		background: #ececec;
	}
	.toggle-tips:active {
		transition-duration: 0s;
		background: #659be0;
		color: #fff;
	}
	.toggle-tips:active i {
		color: #fff;
	}
	.fa-exclamation-circle {
		color: #659be0;
	}
	.archivos-cliente .portlet-body, .archivos-ot .portlet-body {
		height: 300px;
		max-height: 300px;
		overflow-y: auto;
	}
	.folder i {
		color: #F1C40F;
	}
	.file i {
		margin-left: 20px;
		color: #659be0;
	}
	.ot-tree .file i {
		color: #e7505a;
	}
	.file {
		cursor: pointer;
		display: none;
	}
	.folder, .file {
		cursor: pointer;
		padding: 10px;
		font-size: 18px;
		transition-duration: 0.25s;
	}
	.folder:hover {
		background: #ececec;
	}
	.context-cliente, .context-ot {
		z-index: 9994;
		cursor: pointer;
		display: none;
		position: absolute;
		padding: 0px;
		background: #000;
		box-shadow: 0px 10px 35px 0px rgba(0,0,0,.65);
	}
	.context-cliente .opt, .context-ot .opt {
		padding: 10px;
		box-sizing: border-box;
		width: 250px;
		color: #fff;
		background: #111;
	}
	.context-cliente .opt:hover, .context-ot .opt:hover {
		transition-duration: 0.25s;
		background: #88a22a;
	}
	.context-cliente .opt:active, .context-ot .opt:active {
		transition-duration: 0s;
		background: #fff;
		color: #88a22a;
	}
	[author] {
		font-size: 13px;
		font-style: italic;
		color: rgba(0,0,0,.45);
	}
</style>
 
<script type="text/javascript">
	$(function(){
		function unselectFiles(){
			$(".file").removeAttr("file-active");
			$(".file").css({
				"background" : "none"
			});
		}
		$(".toggle-tips").on("click", function(){
			$(".note-success").show();
			$(this).hide();
		});
		$(".note-success").on("click", function(){
			$(".toggle-tips").show();
			$(this).hide();
		});
		var folder = 0;
		$(".folder").on("click", function(){
			var type = $(this).attr("folder-type");
			$(".archivos-cliente .file[file-type="+type+"]").toggle();
		});
		$(".file").on("mouseover", function(){
			if($(this).attr("file-active") != 1){
				$(this).css({
					"background" : "#ececec"
				});
			}
		});
		$(".file").on("mouseleave", function(){
			if($(this).attr("file-active") != 1){
				$(this).css({
					"background" : "none"
				});
			}
		});
		$("html").click(function(){
			unselectFiles();
			$(".context-cliente, .context-ot").hide();
			$(".file").removeAttr("file-active");
		});
		$(".file").contextmenu(function(e){
			unselectFiles();
			$(this).attr("file-active","1");
			$(".buffer-temp").html("");
			$(this).css({
				"background" : "#ececec"
			});
		});
		$(".archivos-cliente .file").contextmenu(function(e){
			$(".context-ot").css({
				"display" : "none"
			});
			$(".context-cliente").css({
				"display" : "block",
				"left" : + e.pageX + 2 + "px",
				"top" : + e.pageY - 50 + "px"
			});
		});
		$(".archivos-ot .file").contextmenu(function(e){
			$(".context-cliente").css({
				"display" : "none"
			});
			$(".context-ot").css({
				"display" : "block",
				"left" : + e.pageX + 2 + "px",
				"top" : + e.pageY - 50 + "px"
			});
		});
		$(".opt-add").on("click", function(){
			$(".archivos-cliente .file[file-active]").appendTo(".buffer-temp");
			var user = $(".username").text().trim();
			$(".buffer-temp .file").append('&nbsp;<span author="' + user + '">(' + user + ")</span>");
			$(".buffer-temp .file").appendTo(".ot-tree");
			$(".buffer-temp").html("");
			unselectFiles();
		});
	});
</script>
 
<div class="buffer-temp" hidden="hidden"></div>
 
<div class="toggle-tips" no-select><i class="fa fa-exclamation-circle"></i>&nbsp; Ver tips informativos...</div>
 
<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>
 
<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>
 
<div class="row" style="padding: 0px 20px 0px 20px;">
 
	<div class="note note-success" hidden="hidden" style="cursor: pointer; margin: 0px 15px 20px 15px;">
		<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>
		<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>
		<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>
	</div>
 
	<!-- ARCHIVOS DE CLIENTE -->
	<div class="col-md-6 archivos-cliente" height="300px">
	    <div class="portlet red box">
	        <div class="portlet-title">
	            <div class="caption">
	                Archivos de <?php echo $nombre_cliente;?>
	            </div>
	        </div>
	        <div class="portlet-body">
	            <?php archivosCliente($cliente_id);?>
	        </div>
	    </div>
	</div>
 
	<!-- ARCHIVOS DE OT -->
	<div class="col-md-6 archivos-ot">
	    <div class="portlet blue-madison box">
	        <div class="portlet-title">
	            <div class="caption">
	                Contenido de Orden de Trabajo
	            </div>
	        </div>
	        <div class="portlet-body ot-tree">
	        	<!-- ARCHIVOS AGREGADOS A ORDENES DE OT -->
	        </div>
	    </div>
	</div>
 
</div>

MOD: Imágenes adpatadas a lo permitido.