monsiteperso/app/templates/admin/_menu-edit.html

<form class="sortable" action="/editmenu" method="POST" id="menuEdit">
   <input id="csrf_token" name="csrf_token" type="hidden" value="{{ csrf_token() }}">
  <div id="Menu" class="list">
    
    {% for item in menu.keys() %}
    {% if menu[item] is mapping %}

    <div class="entry submenu n1" id="{{item}}" style="padding-bottom: 30px;">   
      <button class="btn btn-outline-dark"> {{ item }} </button>
      <div class="list" id="{{item}}" name="{{ item }}"> 
    
	{% for subitem in menu[item].keys() %}
	<div class="entry n1" id="{{item}}§§{{subitem}}" name="{{subitem}}">
	  <button class="btn"> {{subitem}}</button>
	  <input class="input-menu" id="{{item}}§§{{subitem}}" name="{{item}}§§{{subitem}}" value="{{menu[item][subitem]}}">
	  <button class="btn btn-danger" onclick="deleteItem(this)"> x </button>
	</div>
	{% endfor %}

      </div>
    </div>
      {% else %}
      <div class="entry" id="{{ item }}">
	<button class="btn"> {{ item }}</button>
	<input class="input-menu" id="{{item }}" name="{{item}}" value="{{menu[item]}}"> 
	<button class="btn btn-danger" onclick="deleteItem(this)"> x </button>
      </div>
      
      {% endif %}
      {% endfor %}

  </div> 
  <hr />
    
</form>


<div class="newItemMenu" id="newItem">
  <form  class="form-container">
    <h3>Nouvelle entrée</h3><br>
    
    <label for="nom"><b>Nom</b></label>
    <input type="text" placeholder="Nom" id="newEntry_name" required>
    <br/>
    <label> Cette entré est un sous menu </label>
    <input type="checkbox" id="submenu" onclick="disableLink()" value="Cette entré est un sous-menu"><br>
    <label for="link"><b>Lien</b></label>
    <input type="text" placeholder="un lien ou nom d'un bloc" id="newEntry_link">
    <br>
    <button type="button" onclick="addEntry()" class="btn btn-outline-success">+</button>


  </form>
</div>


    <hr>
    <button class="btn btn-success" type="submit" form="menuEdit"> Enregistrer </button>
 




<script src="/static/vendors/Sortable/Sortable.min.js"></script>
<script type="text/javascript">
 
  var elements = document.getElementsByClassName('list');
  
  for (var i = 0; i < elements.length; i++) {
      
      new Sortable(elements[i], {
	  group: 'shared',
	  animation: 150,
	  invertSwap: true,
	  fallbackOnBody: true,
	  swapThreshold: 0.65,
	  onAdd: function (evt) {
	      var itemEl = evt.item;
	      console.log(itemEl.parentElement.id);
	      parentid = itemEl.parentElement.id;
	      if ( parentid === "Menu" ){
		      itemEl.setAttribute("id", itemEl.getAttribute("name"));
		      for (child of itemEl.children){
			  nodeName= child.nodeName;
			  if ( nodeName === "INPUT"){
			      child.setAttribute("name", itemEl.getAttribute("name")); 
			      child.setAttribute("id", itemEl.getAttribute("name"));
			  }
		      }
		  }
		  else {
		      itemEl.setAttribute("id", itemEl.parentElement.id.concat("§§", itemEl.getAttribute("id")) );
		      for (child of itemEl.children){
			  nodeName= child.nodeName;
			  if ( nodeName === "INPUT"){
			      console.log(child.nodeName);
			      child.setAttribute("name", itemEl.id); 
			      child.setAttribute("id", itemEl.id);
			  }
		      }
		  }
	      }
      });
      }
  
</script>
<script>
  document.ondrop = function(event) {
      event.preventDefault();
      
      var menu_entry = document.getElementsByClassName('input-menu');
      
      for (var i = 0; i < menu_entry.length; i++) {
	  parentElement = menu_entry[i].parentElement;
	  menu_entry[i].setAttribute("name", parentElement.id); 
	  menu_entry[i].setAttribute("id", parentElement.id);
      }
  }

  function deleteItem(e){
      e.parentElement.remove()
  }
      
		      
</script>


<script>
  function disableLink() {
      document.getElementById("newEntry_link").setAttribute("disabled", true);
  }

  function openForm() {
      document.getElementById("myForm").style.display = "block";
  }

  function closeForm() {
      document.getElementById("myForm").style.display = "none";
  } 

  function addEntry()
  {
      var menu = document.getElementById("Menu");
      var entry_name =  document.getElementById("newEntry_name").value;
      var entry_link = document.getElementById("newEntry_link").value;
      
      
      // Create menu button
      new_entry_btn = document.createElement("button");
      new_entry_btn.setAttribute("class", "btn");
      text_button = document.createTextNode(entry_name);
      new_entry_btn.appendChild(text_button);
      
      new_menu_entry = document.createElement("div");
      new_menu_entry.setAttribute("class", "entry");
      new_menu_entry.setAttribute("id", entry_name);

      submenu_check = document.getElementById("submenu").checked;
      
      if ( submenu_check )
      {
	  new_entry_btn.setAttribute("class", "btn btn-outline-dark");
	  new_menu_entry.setAttribute("class", "entry submenu n1");
	  
	  new_submenu = document.createElement("div");
	  new_submenu.setAttribute("class", "list");
	  new_submenu.setAttribute("id", entry_name);

	  new Sortable(new_submenu, {
	  group: 'shared',
	  animation: 150,
	  invertSwap: true,
	  fallbackOnBody: true,
	  swapThreshold: 0.65,
	  onAdd: function (evt) {
	      var itemEl = evt.item;
	      console.log(itemEl.parentElement.id);
	      parentid = itemEl.parentElement.id;
	      if ( parentid === "Menu" ){
		      itemEl.setAttribute("id", itemEl.getAttribute("name"));
		      for (child of itemEl.children){
			  nodeName= child.nodeName;
			  if ( nodeName === "INPUT"){
			      child.setAttribute("name", itemEl.getAttribute("name")); 
			      child.setAttribute("id", itemEl.getAttribute("name"));
			  }
		      }
		  }
		  else {
		      itemEl.setAttribute("id", itemEl.parentElement.id.concat("§§", itemEl.getAttribute("id")) );
		      for (child of itemEl.children){
			  nodeName= child.nodeName;
			  if ( nodeName === "INPUT"){
			      console.log(child.nodeName);
			      child.setAttribute("name", itemEl.id); 
			      child.setAttribute("id", itemEl.id);
			  }
		      }
		  }
	      }
      });


	  
	  new_menu_entry.appendChild(new_entry_btn);
	  new_menu_entry.appendChild(new_submenu); 
      }
      else
      {
	  // Create input
	  new_entry_input = document.createElement("input");
	  text_link = document.createTextNode(entry_link);
	  new_entry_input.setAttribute("id", entry_name);
	  new_entry_input.setAttribute("name", entry_name);
	  new_entry_input.setAttribute("class", "input-menu");
	  new_entry_input.setAttribute("value", text_link.textContent);
	  
	  // Create menu entry
	  
	  new_menu_entry.appendChild(new_entry_btn);
	  new_menu_entry.appendChild(new_entry_input);
	   
      }

      menu.appendChild(new_menu_entry);
      document.getElementById("myForm").style.display = "none";
  }
</script>