Como limitar a área arrastavel do Drag and Drop

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (3)  (2)

Seu objeto não sumirá mais da tela quando você o arrastar para fora dos limites do browser :)

Procurando na internet sobre esses objetos que podem ser arrastados e achei coisas bem interessantes, mas nada que falasse como limitar a área, ou tamanho maximo dessa, por onde o objeto é arrastado. Então simplesmente peguei um desses codigos eu fiz uma pequena alteração. O legal desse codigo é que ele é uma função então pode ser chamado infinitas vezes e você não precisa ficar se preocupando em ficar reconfigurando a função todas as vezes :)



<html>
<head>
<style>
body,td,tr {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px 0px;
}
</style>
</head>
<script>
var objSelecionado = null;
var mouseOffset = null;
function addEvent(obj, evType, fn) {
    if (typeof obj == "string") {
        if (null == (obj = document.getElementById(obj))) {
            throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");
        }
    }
    if (obj.attachEvent) {
        return obj.attachEvent(("on" + evType), fn);
    } else if (obj.addEventListener) {
        return obj.addEventListener(evType, fn, true);
    } else {
        throw new Error("Seu browser não suporta adição de eventos. Senta, chora e pega um navegador mais recente.");
    }
}
function mouseCoords(ev){
    if(typeof(ev.pageX)!=="undefined"){
        return {x:ev.pageX, y:ev.pageY};
    }else{
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop  - document.body.clientTop
        };
    }
}
function getPosition(e, ev){
    var ev = ev || window.event;
    if(e.constructor==String){ e = document.getElementById(e);}
    var left = 0, top  = 0;
    var coords = mouseCoords(ev);   

    while (e.offsetParent){
        left += e.offsetLeft;
        top  += e.offsetTop;
        e     = e.offsetParent;
    }
    left += e.offsetLeft;
    top  += e.offsetTop;
    return {x: coords.x - left, y: coords.y - top};
}

function dragdrop(local_click, caixa_movida) {
    //local click indica quem é o cara que quando movido, move o caixa_movida
    if(local_click.constructor==String){ local_click = document.getElementById(local_click);}
    if(caixa_movida.constructor==String){ caixa_movida = document.getElementById(caixa_movida);}

    local_click.style.cursor = 'move';
    if(!caixa_movida.style.position || caixa_movida.style.position=='static'){
        caixa_movida.style.position='relative'
    }
    local_click.onmousedown = function(ev) {
        objSelecionado = caixa_movida;
        mouseOffset = getPosition(objSelecionado, ev);
        if(mouseOffset < 0){objSelecionado.style.margin = '50px';}
    };
    document.onmouseup = function() {
        objSelecionado = null;
    }
    document.onmousemove = function(ev) {
        if (objSelecionado) {
            var ev = ev || window.event;
            var mousePos = mouseCoords(ev);
            var pai = objSelecionado.parentNode;


            //as variáveis w e h definem a posição do(s) objeto(s) movido(s)

            var w = (mousePos.x - mouseOffset.x - pai.offsetLeft);
            var h = (mousePos.y - mouseOffset.y - pai.offsetTop);


            //as variáveis areaHorizontal e areaVertical definem a área maxima, onde o objeto será movido (nesse caso é a area maxima do browser)

            var areaHorizontal = document.body.clientWidth - objSelecionado.clientWidth - 2;
            var areaVertical = document.body.clientHeight - objSelecionado.clientHeight - 2;
           
            objSelecionado.style.left = w + 'px';
            objSelecionado.style.top = h + 'px';


            //essa é a estrutura de condição que reposiciona o objeto movido para não ultrapassar a área máxima
            if(w >= areaHorizontal){
                objSelecionado.style.left = areaHorizontal;
            }
            if(w <= 0){
                objSelecionado.style.left = 0;
            }
            if(h >= areaVertical){
                objSelecionado.style.top = areaVertical;
            }
            if(h <= 0){
                objSelecionado.style.top = 0;
            }


            objSelecionado.style.margin = '0px';
            return false;
        }
    }
}
</script>

<body>
<!-- esta é a div de exemplo que será movida ao clicar na div de borda azul -->
<div id='movido' style='border: 1px solid black; width: 200px;'>
    <div id='movedor' style='border: 1px solid blue;'>mova</div>
    sou a div lálalá
    <br>
    lálálá
</div>
<!-- aqui o script chamando a função que ativa o drag'n'drop -->
<script>dragdrop('movedor','movido');</script>

</body>
</html>
 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?