So, I have these codes here, my div is draggable / moveable, however for some reason I can not type in this input, can anyone find me? Thanks in advance:)
//Make the DIV element draggagle:
dragElement(document.getElementById("ajuda"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
// CÓDIGO (início)
var ww = window.innerWidth; // largura da janela
var wh = window.innerHeight; // altura da janela
var ew = elmnt.offsetWidth; // largura do elemento
var eh = elmnt.offsetHeight; // altura do elemento
// se a posição for maior ou igual do que a largura da tela menos a largura do elemento
if(elmnt.offsetLeft - pos1 >= ww-ew){
elmnt.style.left = ww-ew +"px";
}
// se a posição for maior ou igual do que a altura da tela menos a altura do elemento
if(elmnt.offsetTop - pos2 >= wh-eh){
elmnt.style.top = wh-eh +"px";
}
// se a posição for menor ou igual que zero ao topo
// ou a altura do elemento for maior que a altura da janela
if(elmnt.offsetTop - pos2 <= 0 || eh >= wh){
elmnt.style.top = "0";
}
// se a posição for menor ou igual que zero para a esquerda
// ou a largura do elemento for maior que a largura da janela
if(elmnt.offsetLeft - pos1 <= 0 || ew >= ww){
elmnt.style.left = "0";
}
// CÓDIGO (fim)
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
.ajudaConteudo {
background-color: white;
height: 400px;
position: absolute;
margin-top: 100px;
width: 350px;
overflow-y: scroll;
cursor: auto;
overflow-x: hidden;
}
.ajudaTitulo {
background-color: #1ab3ff;
height: 90px;
width: 335px;
font-family: Arial;
font-size: 30px;
color: white;
position: absolute;
padding-top: 10px;
padding-left: 15px;
}
.pesquisaAjuda {
position: absolute;
top: 60px;
padding: 6px;
width: 280px;
left: 50%;
transform: translate(-50%);
z-index: 9999;
border-radius: 5px;
border: 1px solid transparent;
}
.ajudinha {
background-color: white;
margin-left: 8px;
margin-right: 8px;
box-shadow: 1px 1px 7px grey;
margin-top: 10px;
height: 80px;
}
.ajudinha h1 {
color: gray;
font-weight: 600;
word-break: break-all;
font-size: 16px;
text-align: center;
}
.ajudinha p {
padding-top: 5px;
color: gray;
padding-left: 10px;
padding-right: 7px;
overflow: hidden;
text-overflow: ellipsis;
}
#ajuda {
width: 350px;
height: 500px;
background-color: red;
position: absolute;
z-index: 99999;
right: 20px;
top: 10%;
cursor: all-scroll;
box-shadow: 2px 2px 10px gray;
}
.fecharAjuda {
position: absolute;
top: 0px;
transition: all .4s;
left: 92%;
font-size: 35px;
cursor: pointer;
}
.fecharAjuda:hover {
color: #777;
}
<div id="ajuda">
<input type="text" id="pesquisaAjuda" class="pesquisaAjuda" placeholder="Pesquisa aqui">
<div class="ajudaTitulo">
Ajuda
<div class="fecharAjuda">x</div>
</div>
<div class="ajudaConteudo">
<div class="ajudinha">
<a href="">ss</a>
<h1>Como eu faço para cadastrar um aluno?</h1>
<p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
</div>
<div class="ajudinha">
<h1>Como eu faço para cadastrar um aluno?</h1>
<p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
</div>
<div class="ajudinha">
<h1>Como eu faço para cadastrar um aluno?</h1>
<p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
</div>
<div class="ajudinha">
<h1>Como eu faço para cadastrar um aluno?</h1>
<p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
</div>
<div class="ajudinha">
<h1>Como eu faço para cadastrar um aluno?</h1>
<p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
</div>
<div class="ajudinha">
<h1>Como eu faço para cadastrar um aluno?</h1>
<p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
</div>
</div>
</div>