0

Estoy creando un contenedor contextmenu con el plugin jQuery-contextMenu para añadir contenido (ficheros, carpetas). El contenido se renderiza encima del contenedor.

Estoy intentando prevenir el clic derecho encima de los contenedores .folder-box pero no consigo hacerlo. He intentado prevenirlo mediante:

$(document).on("contextmenu", ".folder-box", function(e){
  e.preventDefault();
  $('.context-block').contextMenu(false);
});

$(document).on("contextmenu", ".context-block", function(e){
  e.preventDefault();
  $('.context-block').contextMenu(true);
});

Pero funciona.

const array = [
  {
    idPadre: 40,
    icono: "fa-folder",
    idCarpeta: 41,
    nombre: "Cr2",
    Miembros: ""
  },
  {
    idCarpeta: 44,
    nombre: "Carpeta sin titulo",
    Miembros: "",
    idPadre: 40,
    icono: "fa-folder"
  },
  {
    Miembros: "",
    nombre: "Carpeta sin titulo2",
    idCarpeta: 45,
    idPadre: 40,
    icono: "fa-folder"
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    nombre: "Carpeta sin titulo2aaaaaaaaaaaaaaa",
    idCarpeta: 46,
    Miembros: ""
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    nombre: "Carpeta sin titulo3232",
    idCarpeta: 47,
    Miembros: ""
  },
  {
    nombre: "Carpeta sin titulo211111",
    idCarpeta: 49,
    Miembros: "",
    icono: "fa-folder",
    idPadre: 40
  },
  {
    Miembros: "",
    nombre: "Carpeta sin titulo212312",
    idCarpeta: 50,
    idPadre: 40,
    icono: "fa-folder"
  },
  {
    nombre: "Carpeta sin titulo2222",
    idCarpeta: 51,
    Miembros: "",
    icono: "fa-folder",
    idPadre: 40
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    Miembros: "",
    nombre: "Crarsa",
    idCarpeta: 52
  },
  {
    Miembros: "",
    nombre: "Otra",
    idCarpeta: 53,
    idPadre: 40,
    icono: "fa-folder"
  },
  {
    idPadre: 40,
    icono: "fa-folder",
    nombre: "OMG",
    idCarpeta: 54,
    Miembros: ""
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    Miembros: "",
    nombre: "Carpeta sin titulo",
    idCarpeta: 56
  },
  {
    Miembros: "",
    idCarpeta: 57,
    nombre: "ASD",
    idPadre: 40,
    icono: "fa-folder"
  },
  {
    idPadre: 40,
    icono: "fa-folder",
    Miembros: "",
    idCarpeta: 61,
    nombre: "Carpeta sin titulo2"
  },
  {
    idPadre: 40,
    icono: "fa-folder",
    idCarpeta: 62,
    nombre: "Carpeta sin titulo2",
    Miembros: ""
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    Miembros: "",
    idCarpeta: 69,
    nombre: "Alex"
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    idCarpeta: 70,
    nombre: '"Carpeta sin titulo2"',
    Miembros: ""
  },
  {
    idPadre: 40,
    icono: "fa-folder",
    idCarpeta: 71,
    nombre: "'Carpeta sin titulo2'",
    Miembros: ""
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    Miembros: "",
    idCarpeta: 72,
    nombre: "`Carpeta sin titulo`"
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    idCarpeta: 73,
    nombre: "ASD",
    Miembros: ""
  }
];

const items_menu_default = {
  "new-folder": {
    name: "Nueva carpeta",
    icon: "fas fa-folder-plus",
    callback: function (itemKey, opt, e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
    }
  },
  hr: "---------",
  "upload-files": {
    name: "Subir archivos",
    icon: "fas fa-file-upload",
    items: {
      "from-pc": {
        name: "Desde el equipo",
        icon: "fas fa-desktop",
        callback: function (itemKey, opt, e) {
          if (e.which == 3 || e.which == 2) {
            return false;
          }
        }
      },
      "from-url": {
        name: "Desde un enlace",
        icon: "fas fa-link",
        callback: function (itemKey, opt, e) {
          if (e.which == 3 || e.which == 2) {
            return false;
          }
        }
      }
    }
  },
  "upload-folders": {
    name: "Subir carpetas",
    icon: "fas fa-folder-plus",
    callback: function (itemKey, opt, e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
    }
  }
};
const items_folder_default = {
  "change-name": {
    name: "Cambiar nombre",
    icon: "far fa-edit",
    callback: function (item, opt, e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }

      let id = $(opt.$trigger).attr("class").split(" ")[1];
      change_folder_name(id);
    }
  },
  "share-with": {
    name: "Compartir",
    icon: "far fa-share-square",
    callback: function (item, opt, e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
    }
  },
  "move-to": {
    name: "Mover a",
    icon: "fas fa-exchange-alt",
    callback: function (itemKey, opt, e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
    }
  },
  hr: "---------",
  remove: {
    name: "Quitar",
    icon: "far fa-trash-alt",
    callback: function (itemKey, opt, e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
      let id = $(opt.$trigger).attr("class").split(" ")[1];
      remove_folder(id);
    }
  }
};

$(document).ready(function (e) {
  //Default right click menu
  $.contextMenu({
    selector: ".context-block",
    className: "sm-context-menu",
    items: items_menu_default
  });
  //Button menu
  $.contextMenu({
    selector: ".btn-block",
    className: "sm-context-menu",
    trigger: "none",
    items: items_menu_default
  });
  //Folder option menu
  $.contextMenu({
    selector: '.folder-div-option',
    className: 'sm-context-menu',
    trigger: 'left',
    items: items_folder_default
  });

  array.forEach(function (obj) {
    let id = obj.idCarpeta;
    let name = obj.nombre;
    let icon = obj.icono;
    let short_name = name_length(name);

    $(".lista-carpetas").append(`<div class="folder-box div-item-folder${id}">
                                  <div class="folder">
                                    <div class="folder-div" title="${name}">
                                      <div class="folder-icon">
                                        <i class="fa ${icon}"></i>
                                      </div>
                                      <div class="folder-name">${short_name}</div>
                                    </div>
                                    <div class="folder-div-option ${id}" title="Option">
                                      <i class="fas fa-ellipsis-v"></i>
                                    </div>
                                  </div>
                                </div>`);
  });
});

/*Prevent default right click*/
$(document).on("contextmenu", ".container-fluid", function (e) {
  e.preventDefault();
});

/*Prevent right click jquery-contextmenu on .folder-box*/
$(document).on("contextmenu", ".folder-box", function(e){
  e.preventDefault();
  //$trigger.contextMenu(false);
});

$(document).on("click", "button.btn", function (e) {
  $(".btn-block").contextMenu();
});

function name_length(name){
  if(name.length > 21){
    return name.substring(0,21)+"...";
  }else{
    return name;
  }
}
.container-fluid {
  min-height: 400px;
}

.folder-box{
    float:left;
    width:220px;
}

.folder{
  border: 1px solid #e7eaec;
  padding: 0;
  background-color: #ffffff;
  position: relative;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-right: 10px;
  height: 40px;
  user-select: none;
}

.folder .folder-div{
    width:182px; 
    display:inline-block; 
    cursor:pointer;
  }
  .folder-div:hover,
  .folder-div-option:hover{
    background-color: #f5f5f5;
  }
  .folder .folder-div .folder-icon{
    display:inline;
  }
  .folder .folder-div .folder-icon i{
    font-size:15px;
    color:#3d4d5d;
    padding:12px 10px;
  }
  .folder .folder-div .folder-name{
    display:inline; 
  }
  .folder .folder-div-option i{
    font-size:15px;
  }
  .folder .folder-div-option{
    display:inline;
    float:right;
    padding:8px 10px;
    cursor:pointer;
    width:25.65px;
  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>




<div class="row container-fluid">
  <div class="col-3">
    <button class="btn btn-primary btn-block">Nuevo</button>
  </div>

  <div class="col-9 context-block">
    <div class="row">
      <div class="col-12 lista-carpetas"></div>
      <div class="col-12 lista-ficheros"></div>
    </div>
  </div>
</div>

1 respuesta 1

2

Sólo tienes que cambiar en tu evento, el método preventDefault por un return false:

$(document).on("contextmenu", ".folder-box", function(e){
  return false;
});

const array = [
  {
    idPadre: 40,
    icono: "fa-folder",
    idCarpeta: 41,
    nombre: "Cr2",
    Miembros: ""
  },
  {
    idCarpeta: 44,
    nombre: "Carpeta sin titulo",
    Miembros: "",
    idPadre: 40,
    icono: "fa-folder"
  },
  {
    Miembros: "",
    nombre: "Carpeta sin titulo2",
    idCarpeta: 45,
    idPadre: 40,
    icono: "fa-folder"
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    nombre: "Carpeta sin titulo2aaaaaaaaaaaaaaa",
    idCarpeta: 46,
    Miembros: ""
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    nombre: "Carpeta sin titulo3232",
    idCarpeta: 47,
    Miembros: ""
  },
  {
    nombre: "Carpeta sin titulo211111",
    idCarpeta: 49,
    Miembros: "",
    icono: "fa-folder",
    idPadre: 40
  },
  {
    Miembros: "",
    nombre: "Carpeta sin titulo212312",
    idCarpeta: 50,
    idPadre: 40,
    icono: "fa-folder"
  },
  {
    nombre: "Carpeta sin titulo2222",
    idCarpeta: 51,
    Miembros: "",
    icono: "fa-folder",
    idPadre: 40
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    Miembros: "",
    nombre: "Crarsa",
    idCarpeta: 52
  },
  {
    Miembros: "",
    nombre: "Otra",
    idCarpeta: 53,
    idPadre: 40,
    icono: "fa-folder"
  },
  {
    idPadre: 40,
    icono: "fa-folder",
    nombre: "OMG",
    idCarpeta: 54,
    Miembros: ""
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    Miembros: "",
    nombre: "Carpeta sin titulo",
    idCarpeta: 56
  },
  {
    Miembros: "",
    idCarpeta: 57,
    nombre: "ASD",
    idPadre: 40,
    icono: "fa-folder"
  },
  {
    idPadre: 40,
    icono: "fa-folder",
    Miembros: "",
    idCarpeta: 61,
    nombre: "Carpeta sin titulo2"
  },
  {
    idPadre: 40,
    icono: "fa-folder",
    idCarpeta: 62,
    nombre: "Carpeta sin titulo2",
    Miembros: ""
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    Miembros: "",
    idCarpeta: 69,
    nombre: "Alex"
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    idCarpeta: 70,
    nombre: '"Carpeta sin titulo2"',
    Miembros: ""
  },
  {
    idPadre: 40,
    icono: "fa-folder",
    idCarpeta: 71,
    nombre: "'Carpeta sin titulo2'",
    Miembros: ""
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    Miembros: "",
    idCarpeta: 72,
    nombre: "`Carpeta sin titulo`"
  },
  {
    icono: "fa-folder",
    idPadre: 40,
    idCarpeta: 73,
    nombre: "ASD",
    Miembros: ""
  }
];

const items_menu_default = {
  "new-folder": {
    name: "Nueva carpeta",
    icon: "fas fa-folder-plus",
    callback: function (itemKey, opt, e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
    }
  },
  hr: "---------",
  "upload-files": {
    name: "Subir archivos",
    icon: "fas fa-file-upload",
    items: {
      "from-pc": {
        name: "Desde el equipo",
        icon: "fas fa-desktop",
        callback: function (itemKey, opt, e) {
          if (e.which == 3 || e.which == 2) {
            return false;
          }
        }
      },
      "from-url": {
        name: "Desde un enlace",
        icon: "fas fa-link",
        callback: function (itemKey, opt, e) {
          if (e.which == 3 || e.which == 2) {
            return false;
          }
        }
      }
    }
  },
  "upload-folders": {
    name: "Subir carpetas",
    icon: "fas fa-folder-plus",
    callback: function (itemKey, opt, e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
    }
  }
};
const items_folder_default = {
  "change-name": {
    name: "Cambiar nombre",
    icon: "far fa-edit",
    callback: function (item, opt, e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }

      let id = $(opt.$trigger).attr("class").split(" ")[1];
      change_folder_name(id);
    }
  },
  "share-with": {
    name: "Compartir",
    icon: "far fa-share-square",
    callback: function (item, opt, e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
    }
  },
  "move-to": {
    name: "Mover a",
    icon: "fas fa-exchange-alt",
    callback: function (itemKey, opt, e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
    }
  },
  hr: "---------",
  remove: {
    name: "Quitar",
    icon: "far fa-trash-alt",
    callback: function (itemKey, opt, e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
      let id = $(opt.$trigger).attr("class").split(" ")[1];
      remove_folder(id);
    }
  }
};

$(document).ready(function (e) {
  //Default right click menu
  $.contextMenu({
    selector: ".context-block",
    className: "sm-context-menu",
    items: items_menu_default
  });
  //Button menu
  $.contextMenu({
    selector: ".btn-block",
    className: "sm-context-menu",
    trigger: "none",
    items: items_menu_default
  });
  //Folder option menu
  $.contextMenu({
    selector: '.folder-div-option',
    className: 'sm-context-menu',
    trigger: 'left',
    items: items_folder_default
  });

  array.forEach(function (obj) {
    let id = obj.idCarpeta;
    let name = obj.nombre;
    let icon = obj.icono;
    let short_name = name_length(name);

    $(".lista-carpetas").append(`<div class="folder-box div-item-folder${id}">
                                  <div class="folder">
                                    <div class="folder-div" title="${name}">
                                      <div class="folder-icon">
                                        <i class="fa ${icon}"></i>
                                      </div>
                                      <div class="folder-name">${short_name}</div>
                                    </div>
                                    <div class="folder-div-option ${id}" title="Option">
                                      <i class="fas fa-ellipsis-v"></i>
                                    </div>
                                  </div>
                                </div>`);
  });
});

/*Prevent default right click*/
$(document).on("contextmenu", ".container-fluid", function (e) {
  return false;
});

/*Prevent right click jquery-contextmenu on .folder-box*/
$(document).on("contextmenu", ".folder-box", function(e){
  return false;
  //$trigger.contextMenu(false);
});

$(document).on("click", "button.btn", function (e) {
  $(".btn-block").contextMenu();
});

function name_length(name){
  if(name.length > 21){
    return name.substring(0,21)+"...";
  }else{
    return name;
  }
}
.container-fluid {
  min-height: 400px;
}

.folder-box{
    float:left;
    width:220px;
}

.folder{
  border: 1px solid #e7eaec;
  padding: 0;
  background-color: #ffffff;
  position: relative;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-right: 10px;
  height: 40px;
  user-select: none;
}

.folder .folder-div{
    width:182px; 
    display:inline-block; 
    cursor:pointer;
  }
  .folder-div:hover,
  .folder-div-option:hover{
    background-color: #f5f5f5;
  }
  .folder .folder-div .folder-icon{
    display:inline;
  }
  .folder .folder-div .folder-icon i{
    font-size:15px;
    color:#3d4d5d;
    padding:12px 10px;
  }
  .folder .folder-div .folder-name{
    display:inline; 
  }
  .folder .folder-div-option i{
    font-size:15px;
  }
  .folder .folder-div-option{
    display:inline;
    float:right;
    padding:8px 10px;
    cursor:pointer;
    width:25.65px;
  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>




<div class="row container-fluid">
  <div class="col-3">
    <button class="btn btn-primary btn-block">Nuevo</button>
  </div>

  <div class="col-9 context-block">
    <div class="row">
      <div class="col-12 lista-carpetas"></div>
      <div class="col-12 lista-ficheros"></div>
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.