0

Pessoal tenho uma aplicação que tem uma div flutuante que o usuário pode arrastar dentro da tela, só que com o draggable() do jquery ele deixa o usuário arrastar a div além da tela e muita vezes ele não consegue trazer ela para o centro sem ter que resetar a aplicação, então eu queria limitar essa flutuação ao tamanho da tela do usuário porem estou tendo dificuldades

    $(function () {
        $(".window-float").draggable();
    });
body{
background-color: #666666 !important;
}
#screen {
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    height: 400px;
    width: 600px;
    background-color: #ffffff;
  }
  
  #menubar {
    height: 10%;
    width: 100%;
    background-color: #2A373A;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  
  .mac-btn {
    position: absolute;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    margin-top: 15.5px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="screen" class="window-float">
        <div id="menubar">
            <div class="mac-btn" id="mac-btn-one"></div>
            <div class="mac-btn" id="mac-btn-two"></div>
            <div class="mac-btn" id="mac-btn-three"></div>
        </div>
        <div class="">

        </div>
    </div>

1 Resposta 1

1

Use a opção "containment":

jQuery UI API - Draggable Widget - containment

A documentação diz que só aceita os valores: 'parent', 'document', 'window', [x1, y1, x2, y2], mas parece que lembro que aceitará um seletor como '#container' também.

Créditos: Pergunta original no SOen

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .