0

Em minhas brincadeiras no HTML e JavaScript, tentei criar um mini quebra-cabeça com o bloco e o lugar de encaixe aonde ele será colocado.

function parseNumber(num) {
return parseFloat(num.replace(/[^\d]/)) || 0;
}
var movePopUp = (function() {
var startX;
var startY;
var currentPopUp = null;
var currentWidth = 0;
var currentHeight = 0;
var currentLeft = 0;
var currentTop = 0;
var callMoveOnPopUp = null;
var callMoveStopPopUp = null;
var contentMove = '.popup .title';
var move = false;
var marginStop = 30;
var maxWidth = window.innerWidth - marginStop;
var maxHeight = window.innerHeight - marginStop;
jQuery(contentMove).on('mousedown', function(e) {
    currentPopUp = this.parentNode.parentNode;
    currentLeft = parseNumber(currentPopUp.style.left);
    currentTop = parseNumber(currentPopUp.style.top);
    startX = e.clientX;
    startY = e.clientY;
    if (typeof(callMoveOnPopUp) == 'function')
        callMoveOnPopUp(currentPopUp);
    move = true;
});
jQuery(document).on('mouseup', function() {
    if (currentPopUp == null) return;
    if (typeof(callMoveStopPopUp) == 'function')
        callMoveStopPopUp(currentPopUp);
    currentPopUp = null;
    move = false;
})
jQuery(document).on('mousemove', function(e) {
    if (move == true) {
        var newX = currentLeft + e.clientX - startX;
        var newY = currentTop + e.clientY - startY;
        if (marginStop > e.clientX) return;
        if (marginStop > e.clientY) return;
        if (maxWidth < e.clientX) return;
        if (maxHeight < e.clientY) return;
        jQuery(currentPopUp).css({
            'left': newX,
            'top': newY,
        });
    }
});
return function(func1, func2) {
    callMoveOnPopUp = func1;
    callMoveStopPopUp = func2;
}
})();
.popup{
    position : fixed;
    width : 200px; /*LARGURA DO CAMPO*/
    height : 200px; /*ALTURA DO CAMPO*/
    border : 1px solid #000;
}
.popup:hover{
    border : 2px solid #000;
}
.popup .title{
  width: 260px; /*LARGURA DO CAMPO*/
  margin: 5px;
  cursor : move;
}
#texto1{
  color: black;
  height: 185px; /*ALTURA DO CAMPO*/
  line-height: 185px;
  background-color: transparent;
  text-align: center;
  width: 71.5%;
}
#encaixe{
	background-color: lightgray;
    width : 200px; /*LARGURA DO CAMPO*/
    height : 200px; /*ALTURA DO CAMPO*/
    margin-top: 50%;
    margin-left: 50%;
    text-align: center;
    line-height: 20px;
}
#encaixe:hover{
	background-color: gray;
}
h3{
  font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup" style="top:50px; left:50px;" value="bloco">
    <div>
      <div class="title">
        <div id="texto1">
          BLOCO
        </div>
      </div>
    </div>
    <div class="popup_body">
    </div>
  </div>
  <div id="encaixe">
  	<br><br><br>encaixar bloco aqui<hr>
    obs. quando ele for encaixado aqui, seu valor será alterado via JavaScript;
  </div>

Só que desta forma, queria que esse bloco na hora do encaixe fixo dentro da div, alterasse o seu valor (value) por meio de uma função jQuery ou pelo próprio JavaScript.

Qual método seria mais prático e lógico para colocar este bloco dentro do encaixe e também para alterar o seu valor quando estivesse dentro dele automaticamente?

3
  • Porque o bloco que arrasta e o local onde encaixa não tem o mesmo tipo de posicionamento ? Tendo tipos de posicionamentos diferentes os valores que obtem no left e top simplesmente não jogam
    – Isac
    13/12/2018 às 11:14
  • Se a tag com a classe popup estiver sem as propriedades left e top, aconteceria a mesma coisa. A questão é que eu queria colocar o bloco dentro do seu encaixe, com uma manipulação jQuery ou JavaScript, alterando o seu valor na tag.
    – pe.Math
    14/12/2018 às 18:56
  • Pois mas da forma que está, se eles tiverem o mesmo valor de top e left não vão ficar no mesmo local na página, e por isso você cria uma dificuldade em "encaixar o elemento" pois não sabe quando encaixam porque valores iguais não jogam
    – Isac
    15/12/2018 às 17:35

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .