Início / coding / Perguntas / 78287847
Accepted
lharby
Asked: 2024-04-07 20:45:17 +0800 CST

Permitir arrastar itens abaixo da altura da janela. JavaScript baunilha

  • 772

Estou tentando construir um site para meu cliente, que não seja diferente do Miro (ou de outros aplicativos de quadro branco).

O conceito é que os elementos individuais são dispostos usando posicionamento absoluto, mas o administrador pode arrastá-los na janela de visualização e definir propriedades de largura e altura para cada elemento.

Não consigo fazer funcionar nenhum método que permita arrastar abaixo da altura original da janela (mesmo que todo o documento tenha elementos com alturas definidas maiores que a altura da janela).

Eu tentei 3 métodos:

  1. Defina alguma propriedade de altura grande no wrapper. https://jsfiddle.net/lharby/afjwsm75/

const draggingClass = 'dragging';

class draggable {
    constructor(element, node = [ document ] ) {
        this.node = node;
        this.el = element;

        if ( this.el ) {
            this.mouseDown = this.mouseDown.bind(this);
            this.mouseUp = this.mouseUp.bind(this);
            this.mouseMove = this.mouseMove.bind(this);
        }
    }

    setHandle( handle ) {
        this.handle = handle;
        return this;
    }

    setCallback( callback ) {
        this.callback = callback;
        return this;
    }

    mouseDown( event ) {
        if ( this.callback?.start ) this.callback.start( event, this.el )
        else this.el.classList.add(draggingClass)        
        for ( const node of this.node ) {
            node.addEventListener('mouseup', this.mouseUp);
            node.addEventListener('mousemove', this.mouseMove);
            node.addEventListener('mouseleave', this.mouseUp);
        }
        this.el.addEventListener('mouseleave', this.mouseUp);
    }

    mouseUp( event ) {
        if ( this.callback?.end ) this.callback.end( event, this.el )
        else this.el.classList.remove(draggingClass)
        for ( const node of this.node ) {
            node.removeEventListener('mouseup', this.mouseUp);
            node.removeEventListener('mousemove', this.mouseMove);
            node.removeEventListener('mouseleave', this.mouseUp);
        }
        this.el.removeEventListener('mouseleave', this.mouseUp);
    }

    mouseMove(event) {
        if ( this.callback?.move ) {
            this.callback.move( event, this.el );
        } else {
            const style = window.getComputedStyle(this.el);
            const x = (parseFloat(style.getPropertyValue('left')) || 0) + event.movementX;
            const y = (parseFloat(style.getPropertyValue('top')) || 0) + event.movementY;
            const rect = this.el.getBoundingClientRect();
            const viewHeight = window.innerHeight || document.documentElement.clientHeight;
            const viewWidth = window.innerWidth || document.documentElement.clientWidth;
            const maxX = viewWidth - rect.width;
            const maxY = viewHeight - rect.height;
            const constrainedX = Math.max(0, Math.min(x, maxX));
            const constrainedY = Math.max(0, Math.min(y, maxY));
            this.el.style.position = 'absolute';
            this.el.style.top = constrainedY + 'px';
            this.el.style.left = constrainedX + 'px';
        }
    }

    run() {
        const handle = this.handle ?? this.el
        handle.addEventListener('mousedown', this.mouseDown)
    }

    stop() {
        const handle = this.handle ?? this.el
        handle.removeEventListener('mousedown', this.mouseDown)
    }
}

const boxes = document.querySelectorAll('.box');
const movable1 = new draggable(boxes[0]);
const movable2 = new draggable(boxes[1]);
movable1.run();
movable2.run();
body {
    font-family: monospace;
}

.wrapper {
    min-height: 400vh;
    background-color: rgb(255 0 0 / 10%);
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    overflow-y: scroll;
}

.box {
    position: absolute;
    padding: 10px;
    resize: both;
    height: 150px;
    width: 150px;
    margin-bottom: 20px;
    background: #f0f0f0;
    border: 2px solid #555;
    overflow: auto;
    background-image: linear-gradient(-45deg, #ccc 10px, transparent 10px);
}

.second {
    top: 50px;
    left: 50px;
}

.third {
    top: 100px;
    left: 100px;
}

.heading {
    background: red;
    padding: 5px 10px;
}

.dragging {
    opacity: 0.9;
    border: 2px dashed #8181b9;
    user-select: none;
    z-index: 2;
    cursor: move;
}

.actions {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    z-index: 1;
}
<div class="outer">
    <div class="wrapper">
        <div class="box">
            I am box 1
        </div>
        <div class="box second">
            I am box 2
        </div>

        <div class="box second third dragging">
            I am box 3
        </div>
    </div>
</div>

  1. Defina o html para uma posição fixa sem rolagem e coloque caixas dentro de um div que permita a rolagem com uma altura grande. https://jsfiddle.net/lharby/25oqth67/

HTML é igual ao anterior, mas usando este CSS

html.no-scroll {
    overflow-y: hidden;
}

.outer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
}

.wrapper {
    height: 100%;
    background-color: rgb(255 0 0 / 10%);
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    overflow-y: scroll;
}

.box {
    position: relative; // I also added a JS toggle to switch position from relative to absolute
    ...
}
  1. Tente definir dinamicamente a altura do documento ou a altura da janela. https://jsfiddle.net/lharby/e8fb6537/

HTML e CSS semelhantes aos exemplos anteriores, mas aqui estão alguns JS

let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

const trigger = document.querySelector('.actions button');
trigger.addEventListener('click', () => {
    let root = document.querySelector(':root');
    let docHeight = document.documentElement.clientHeight;
    let winHeight = window.innerHeight;
    docHeight = 1200; // also tried `${1200}px`
    winHeight = 1300; // also tried `${1300}px`
    root.style.height = `${1400}px`;
    console.log(docHeight, winHeight, root.style.height);
    console.log(vh);
});

Também tentei adicionar um elemento abaixo do wrapper arrastável. Além de definir propriedades de altura no HTML e no corpo. Parece que nada permitirá ao usuário arrastar as caixas abaixo da altura original da janela. A menos que esteja faltando alguma correção fácil de CSS.

Os JSFiddles contêm todas as outras funcionalidades (caixas de arrastar) que funcionam como estão, mas adicionei um trecho de código ao primeiro exemplo, que seria o mais fácil de descobrir, pois presumo que possa ser CSS puro.

Curiosamente, se você pesquisar este tópico no Google, parece haver uma abundância de respostas sobre como limitar o arrasto para dentro de um contêiner específico.

Prefiro evitar uma biblioteca, se possível.

https://www.google.com/search?q=javascript+drag+item+beyond+window+height+site%3Astackoverflow.com

Qualquer ajuda muito apreciada.

javascript

1 respostas

  1. Best Answer

    Se entendi seu problema corretamente, é apenas a maneira como esse comportamento é descrito em seu código.

    Por favor, veja como desativei as restrições no seu mouseMove(event)método e as substituí constrained...por x/y, e agora tudo funciona:

            // const constrainedX = Math.max(0, Math.min(x, maxX));
        // const constrainedY = Math.max(0, Math.min(y, maxY));
        this.el.style.position = 'absolute';
        this.el.style.top = y + 'px';
        this.el.style.left = x + 'px';

    Por favor, deixe-me saber se isso ajuda.

    const draggingClass = 'dragging';

class draggable {
    constructor(element, node = [ document ] ) {
        this.node = node;
        this.el = element;

        if ( this.el ) {
            this.mouseDown = this.mouseDown.bind(this);
            this.mouseUp = this.mouseUp.bind(this);
            this.mouseMove = this.mouseMove.bind(this);
        }
    }

    setHandle( handle ) {
        this.handle = handle;
        return this;
    }

    setCallback( callback ) {
        this.callback = callback;
        return this;
    }

    mouseDown( event ) {
        if ( this.callback?.start ) this.callback.start( event, this.el )
        else this.el.classList.add(draggingClass)        
        for ( const node of this.node ) {
            node.addEventListener('mouseup', this.mouseUp);
            node.addEventListener('mousemove', this.mouseMove);
            node.addEventListener('mouseleave', this.mouseUp);
        }
        this.el.addEventListener('mouseleave', this.mouseUp);
    }

    mouseUp( event ) {
        if ( this.callback?.end ) this.callback.end( event, this.el )
        else this.el.classList.remove(draggingClass)
        for ( const node of this.node ) {
            node.removeEventListener('mouseup', this.mouseUp);
            node.removeEventListener('mousemove', this.mouseMove);
            node.removeEventListener('mouseleave', this.mouseUp);
        }
        this.el.removeEventListener('mouseleave', this.mouseUp);
    }

    mouseMove(event) {
        if ( this.callback?.move ) {
            this.callback.move( event, this.el );
        } else {
            const style = window.getComputedStyle(this.el);
            const x = (parseFloat(style.getPropertyValue('left')) || 0) + event.movementX;
            const y = (parseFloat(style.getPropertyValue('top')) || 0) + event.movementY;
            const rect = this.el.getBoundingClientRect();
            const viewHeight = window.innerHeight || document.documentElement.clientHeight;
            const viewWidth = window.innerWidth || document.documentElement.clientWidth;
            const maxX = viewWidth - rect.width;
            const maxY = viewHeight - rect.height;
            // const constrainedX = Math.max(0, Math.min(x, maxX));
            // const constrainedY = Math.max(0, Math.min(y, maxY));
            this.el.style.position = 'absolute';
            this.el.style.top = y + 'px';
            this.el.style.left = x + 'px';
        }
    }

    run() {
        const handle = this.handle ?? this.el
        handle.addEventListener('mousedown', this.mouseDown)
    }

    stop() {
        const handle = this.handle ?? this.el
        handle.removeEventListener('mousedown', this.mouseDown)
    }
}

const boxes = document.querySelectorAll('.box');
const movable1 = new draggable(boxes[0]);
const movable2 = new draggable(boxes[1]);
movable1.run();
movable2.run();
    body {
    font-family: monospace;
}

.wrapper {
    min-height: 400vh;
    background-color: rgb(255 0 0 / 10%);
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    overflow-y: scroll;
}

.box {
    position: absolute;
    padding: 10px;
    resize: both;
    height: 150px;
    width: 150px;
    margin-bottom: 20px;
    background: #f0f0f0;
    border: 2px solid #555;
    overflow: auto;
    background-image: linear-gradient(-45deg, #ccc 10px, transparent 10px);
}

.second {
    top: 50px;
    left: 50px;
}

.third {
    top: 100px;
    left: 100px;
}

.heading {
    background: red;
    padding: 5px 10px;
}

.dragging {
    opacity: 0.9;
    border: 2px dashed #8181b9;
    user-select: none;
    z-index: 2;
    cursor: move;
}

.actions {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    z-index: 1;
}
    <div class="outer">
    <div class="wrapper">
        <div class="box">
            I am box 1
        </div>
        <div class="box second">
            I am box 2
        </div>

        <div class="box second third dragging">
            I am box 3
        </div>
    </div>
</div>

    • 1

relate perguntas