Конфигурация бокового касания и перетаскивания

Question

Я пытаюсь настроить этот код для запуска с правой стороны, но я не могу понять, как. Не могли бы вы помочь мне, пожалуйста?

Я прикрепил код HTML, CSS и Javascript на случай, если вы сможете мне помочь.

Примечание: как вы можете см. в файле html код css и javascript в соответствующих файлах css и js.

function MenuLateral(){
	var dis     = this;
	dis.menu    = document.getElementById('menu-lateral');
	dis.btn     = document.getElementById('btn-menu-lateral');
	// Determino si puedo hacer touch o no.
	dis.touchsi = 'ontouchstart' in window;
	// Variables para guardar eventos.
	dis.empieza;
	dis.mientras;
	dis.termina;
	dis.moviendo = false;
	dis.puntoPartida;
	dis.movido;
	dis.pos;
	dis.abierto = false;
 
	// Pregunto si soporta touch para mobile y asigno los eventos a las variables.
	if (dis.touchsi) {
		dis.empieza  = 'touchstart';
		dis.mientras = 'touchmove';
		dis.termina  = 'touchend';
	}else{
		dis.empieza  = 'mousedown';
		dis.mientras = 'mousemove';
		dis.termina  = 'mouseup';
	}

	// Comienzo 
	dis.menu.addEventListener(dis.empieza, function(event){
      event.preventDefault;
		// Le digo que se está moviendo.
		dis.moviendo = true;

		// Si tiene touch uso este, si no el click.
		if (dis.touchsi) {
			// console.log('punto de partida '+event.touches[0].clientX);
			dis.puntoPartida = event.touches[0].clientX;
			// console.log('pos inicial '+dis.menu.offsetLeft);
			dis.pos = dis.menu.offsetLeft * -1;
		}else{
			// console.log('punto de partida '+event.touches[0].clientX);
			dis.puntoPartida = event.clientX;
			// console.log('pos inicial '+dis.menu.offsetLeft);
			dis.pos = dis.menu.offsetLeft * -1;
      }

	});
	
	document.addEventListener(dis.mientras, function(event){
      event.preventDefault();

		if(dis.moviendo){

			if(dis.touchsi){
				dis.movido = event.touches[0].clientX - dis.puntoPartida;
				console.log('movido: '+dis.movido);

			}else{
				dis.movido = event.clientX - dis.puntoPartida;
				console.log('movido: '+dis.movido);
         }

			dis.menu.style.left = (dis.movido - dis.pos)+'px';
		}else{

      }
	});

	document.addEventListener(dis.termina, function(event){
		dis.moviendo = false;
      event.preventDefault();
		//if(dis.touchsi){

			if(dis.movido > 50){
				dis.menu.style.left = 0+'px';
				dis.abierto  = true;

			}else if(dis.movido < -50){
				dis.menu.style.left = -220+'px';
				dis.abierto = false;
			}else{
				if(dis.abierto){
					dis.menu.style.left = 0+'px';
				}else{
					dis.menu.style.left = -220+'px';
				}
			}

		//}
      //else{
		//	if(dis.abierto){
		//		dis.menu.style.left = '-220px';
		//		dis.abierto = false;
		//	}else{
		//		dis.menu.style.left = '0px';
		//		dis.abierto  = true;
		//	}
		//}
	});
}
if (document.getElementById('menu-lateral') != null) {
	var lateral = new MenuLateral();
}

.aside-mobile {
  width: 220px;
  position: fixed;
  box-sizing: border-box;
  padding: 10px 0;
  height: 100%;
  top: 0;
  left: -220px;
  z-index: 2;
  background: #3a3a3a;
  display: block;
  transition: all 0.3s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}
.aside-mobile .cont-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.aside-mobile h2 {
  color: #0f9;
  font-size: 35px;
  padding: 0 0 0 20px;
  line-height: 100%;
  margin: 5px 0;
}
.aside-mobile ul {
  display: block;
  box-sizing: border-box;
  padding: 0 0 0 20px;
}
.aside-mobile ul li {
  display: block;
}
.aside-mobile ul li a {
  display: block;
  text-align: left;
  font-size: 13px;
  color: #0f9;
  text-transform: uppercase;
  padding: 5px 0;
  text-decoration: none;
  cursor: pionter;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.aside-mobile ul li a:hover {
  color: #9f0;
}
.aside-mobile .ico-seccion {
  width: 24px;
  height: 60px;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -24px;
  z-index: 2;
  margin: auto;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
}
.aside-mobile .ico-seccion:hover {
  transform: scale(1.2);
}
.aside-mobile .ico-seccion .circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  background: #f7a700;
}
.aside-mobile #btn-menu-lateral {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  right: -20px;
}
.contenido {
  width: 100%;
  height: 100%;
  position: relative;
  float: left;
}
.indicaciones {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 30px;
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./dragstyle.css">

</head>
<body>
<!-- partial:index.partial.html -->
<aside id="menu-lateral" class="aside-mobile">
   <div class="cont-scroll">
      <h2>MENÚ</h2>

      <ul>
         <li><a href="#">Item 1</a></li>
         <li><a href="#" class="actual">Sección 2</a></li>
         <li><a href="#">Sección 3</a></li>
         <li><a href="#">Otra sección</a></li>
         <li><a href="#">Programas</a></li>
      </ul>
      <div class="ico-seccion">
         <div class="circulo salud"></div>
      </div>
      <div id="btn-menu-lateral"></div>
   </div>
</aside>

<!-- partial -->
  <script  src="./dragscript.js"></script>

</body>
</html>

Большое спасибо заранее