Collect id from a file with right click

Question

Collect id from a file with right click

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I'm designing a web app, a cloud. When I upload a file to the database of the one ID, I show the file in question by screen. Up here without problems, the problem comes to me when I want to perform X action on that file. I have disabled the right click to show a menu with several functions.

The question is, how can I know what file (id) I clicked on right? and then how can I know what menu option I have selected and what file?

I've been stuck here for several days, I hope you can help me.

$(document).ready(function(){
             
  //Ocultamos el menú al cargar la página
  $("#menu_derecho").hide();
             
  /* mostramos el menú si hacemos click derecho con el ratón */
  $(document).bind("contextmenu", function(e){
    $("#menu_derecho").css({'display':'block', 'left':e.pageX, 'top':e.pageY});
    return false;
  });
             
             
  //cuando hagamos click, el menú desaparecerá
  $(document).click(function(e){
    if(e.button == 0){
      $("#menu_derecho").css("display", "none");
    }
  });
             
  //si pulsamos escape, el menú desaparecerá
  $(document).keydown(function(e){
    if(e.keyCode == 27){
      $("#menu_derecho").css("display", "none");
    }
  });                      
});

div#menu_derecho ul{
	list-style: none;
	list-style-type: none;
	list-style-position: outside;
}
		 
div#menu_derecho li{
	list-style: none;
	box-shadow: 0 0 0 0 #800;
}

div#menu_derecho li a:hover{
	box-shadow: 250px 0 0 0 #FF7A62 inset;
}

div#menu_derecho li a{
	line-height: 30px;
	font-size: 16px;
	cursor:pointer;
	padding: 10px;
	color: #FFF;
	display: block;
	text-decoration: none;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

div#menu_derecho li a span{
	float: right;
	padding-top: 7px;
}
		 
div#menu_derecho{
	width:170px;
	position:absolute;   
	background: tomato;   
	border:1px solid #800;
	z-index: 999999;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

<!DOCTYPE html>
<html lang="es" >
	<head>
	    <link rel="stylesheet" href="css/clicderecho.css">
		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>		
		<script  src="js/clicderecho.js"></script>

	</head>
	<body>
		<div id="menu_derecho">
		    <ul>
		        <li><a href="#">Copiar</a></li>
		        <li><a href="#">Compartir</a></li>
		        <li><a href="#">Descargar</a></li>
		    </ul>
		</div>
		<div id="cuerpo">
			<ul>
				<li><spam class="nom_fic" id="1">Fichero 1</spam></li>
				<li><spam class="nom_fic" id="2">Fichero 2</spam></li>
				<li><spam class="nom_fic" id="3">Fichero 3</spam></li>
				<li><spam class="nom_fic" id="4">Fichero 4</spam></li>
			</ul>
		</div>
	</body>
</html>

I would like the final result to be an alert saying (for example) "You have selected Download on file with id 2"

javascript jquery funciones

asked by Fabián Moreno 10.04.2018 в 16:28

source

2 answers

One-dimensional arrays in C ++ Modify value of html attributes with angular2

score 2 · Answer 1

One option you have is to add a class to the menu that appears when you right click:

<li><a href="#" class="nom_menu">Copiar</a></li>

Then get the id selected with the event.which (returns 1 for the left click, 2 for the center and 3 for the right)

var idSelec;
  $('.nom_fic').mousedown(function(event) {
    switch (event.which) {
        case 3:
            idSelec = $(this).attr("id");
            break;
    }
});

And finally in the event click of the menu class show the alert:

$('.nom_menu').click(function(){
    alert("Has seleccionado " + $(this).html() + " sobre el fichero con id " +  idSelec);
})

$(document).ready(function(){
             
  //Ocultamos el menú al cargar la página
  $("#menu_derecho").hide();
             
  /* mostramos el menú si hacemos click derecho con el ratón */
  $(document).bind("contextmenu", function(e){
    $("#menu_derecho").css({'display':'block', 'left':e.pageX, 'top':e.pageY});
    return false;
  });
         
  var idSelec;
  $('.nom_fic').mousedown(function(event) {
    switch (event.which) {
        case 3:
            idSelec = $(this).attr("id");
            break;
    }
});       

$('.nom_menu').click(function(){
	alert("Has seleccionado " + $(this).html() + " sobre el fichero con id " +  idSelec);
})

             
  //cuando hagamos click, el menú desaparecerá
  $(document).click(function(e){
    if(e.button == 0){
      $("#menu_derecho").css("display", "none");
    }
  });
             
  //si pulsamos escape, el menú desaparecerá
  $(document).keydown(function(e){
    if(e.keyCode == 27){
      $("#menu_derecho").css("display", "none");
    }
  });                      
});

div#menu_derecho ul{
	list-style: none;
	list-style-type: none;
	list-style-position: outside;
}
		 
div#menu_derecho li{
	list-style: none;
	box-shadow: 0 0 0 0 #800;
}

div#menu_derecho li a:hover{
	box-shadow: 250px 0 0 0 #FF7A62 inset;
}

div#menu_derecho li a{
	line-height: 30px;
	font-size: 16px;
	cursor:pointer;
	padding: 10px;
	color: #FFF;
	display: block;
	text-decoration: none;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

div#menu_derecho li a span{
	float: right;
	padding-top: 7px;
}
		 
div#menu_derecho{
	width:170px;
	position:absolute;   
	background: tomato;   
	border:1px solid #800;
	z-index: 999999;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es" >
	<head>
	    <link rel="stylesheet" href="css/clicderecho.css">
		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>		
		<script  src="js/clicderecho.js"></script>

	</head>
	<body>
		<div id="menu_derecho">
		    <ul>
		        <li><a href="#" class="nom_menu">Copiar</a></li>
		        <li><a href="#" class="nom_menu">Compartir</a></li>
		        <li><a href="#" class="nom_menu">Descargar</a></li>
		    </ul>
		</div>
		<div id="cuerpo">
			<ul>
				<li><spam class="nom_fic" id="1">Fichero 1</spam></li>
				<li><spam class="nom_fic" id="2">Fichero 2</spam></li>
				<li><spam class="nom_fic" id="3">Fichero 3</spam></li>
				<li><spam class="nom_fic" id="4">Fichero 4</spam></li>
			</ul>
		</div>
	</body>
</html>

score 1 · Answer 2

An alternative is to use data-id="<aqui el id>" in your element <span> .. and then capture it from the context menu event with the function data .

Changes to the html:

<li><spam class="nom_fic" data-id="1">Fichero 1</spam></li>
<li><spam class="nom_fic" data-id="2">Fichero 2</spam></li>
<li><spam class="nom_fic" data-id="3">Fichero 3</spam></li>
<li><spam class="nom_fic" data-id="4">Fichero 4</spam></li>

Changes to javascript:

/* mostramos el menú si hacemos click derecho con el ratón */
$(document).bind("contextmenu", function(e){
  var id = $(e.target).data('id');
  console.log("Has seleccionado el fichero con id", id);
  $("#menu_derecho").css({'display':'block', 'left':e.pageX, 'top':e.pageY});
  return false;
});

Then you can do something similar for the action in question as I show you in the example below:

$(document).ready(function(){
  var seleccionado;
  //Ocultamos el menú al cargar la página
  $("#menu_derecho").hide();
             
  /* mostramos el menú si hacemos click derecho con el ratón */
  $(document).bind("contextmenu", function(e){
    // aqui capturas el id establecido en el atributo 'data-id'
    seleccionado = $(e.target).data('id');
    console.log("Has seleccionado el fichero con id", seleccionado);
    $("#menu_derecho").css({'display':'block', 'left':e.pageX, 'top':e.pageY});
    return false;
  });
             
             
  //cuando hagamos click, el menú desaparecerá
  $(document).click(function(e){
    var accion = $(e.target).data('accion');
    if(accion){
      console.log("Has seleccionado", accion, "sobre el fichero con id", seleccionado);
      $("#menu_derecho").css("display", "none");
      seleccionado = undefined;
    }
  });
             
  //si pulsamos escape, el menú desaparecerá
  $(document).keydown(function(e){
    if(e.keyCode == 27){
      $("#menu_derecho").css("display", "none");
    }
  });                      
});

div#menu_derecho ul{
	list-style: none;
	list-style-type: none;
	list-style-position: outside;
}
		 
div#menu_derecho li{
	list-style: none;
	box-shadow: 0 0 0 0 #800;
}

div#menu_derecho li a:hover{
	box-shadow: 250px 0 0 0 #FF7A62 inset;
}

div#menu_derecho li a{
	line-height: 30px;
	font-size: 16px;
	cursor:pointer;
	padding: 10px;
	color: #FFF;
	display: block;
	text-decoration: none;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

div#menu_derecho li a span{
	float: right;
	padding-top: 7px;
}
		 
div#menu_derecho{
	width:170px;
	position:absolute;   
	background: tomato;   
	border:1px solid #800;
	z-index: 999999;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

<!DOCTYPE html>
<html lang="es" >
	<head>
	    <link rel="stylesheet" href="css/clicderecho.css">
		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>		
		<script  src="js/clicderecho.js"></script>

	</head>
	<body>
		<div id="menu_derecho">
		    <ul>
		        <li><a href="#" data-accion="copiar">Copiar</a></li>
		        <li><a href="#" data-accion="compartir">Compartir</a></li>
		        <li><a href="#" data-accion="descargar">Descargar</a></li>
		    </ul>
		</div>
		<div id="cuerpo">
			<ul>
				<li><spam class="nom_fic" data-id="1">Fichero 1</spam></li>
				<li><spam class="nom_fic" data-id="2">Fichero 2</spam></li>
				<li><spam class="nom_fic" data-id="3">Fichero 3</spam></li>
				<li><spam class="nom_fic" data-id="4">Fichero 4</spam></li>
			</ul>
		</div>
	</body>
</html>