Test Foro de elhacker.net SMF 2.1

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!

<?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.