function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("ID", ev.target.id)
  $('.drop-action').addClass('drop-inactive')
  $('.droppable').removeClass('drop-inactive').addClass('drop-active')
}

function drop(ev) {
  
  ev.preventDefault();
  
  const target = $(ev.currentTarget).find('.modules-container')
  const overlay = $('#dropConfirm')
  const loading = $('#dropLoading')
  const discard = overlay.find('.discard')
  const confirm = overlay.find('.confirm')
  const data = ev.dataTransfer.getData("ID")
  
  let once = true
  
  overlay.fadeIn()
  
  discard.on('click',()=>{
    if(once){
      overlay.fadeOut()
      once = false
    }
  })  
  
  confirm.on('click', ()=>{

    if(once){
      loadingInit()
      overlay.fadeOut()
      loading.fadeIn()

      setTimeout(()=>{
        const module = $('#'+data)
        loading.fadeOut()
        target.append('<div class="div-drag">'+module.text()+'</div>')
      },7000)
      once = false
    }

  })

} 

function dragLeave(ev) {
  $('.drop-action').removeClass('drop-inactive')
  $('.droppable').removeClass('drop-active')
}