Esta 'funcionalidade' pertence mais precisamente ao JQuery-UI, ou seja, uma extensão do JQuery muito interessante

Atribuindo a classe 'draggable' do JQuery a um objeto este se torna 'arrastável' pela página.

O efeito de arrastar ocorre quando clicamos num objeto na página com o mouse mantendo o botão pressionado do mouse e movemos o mouse para outra região da tela levando o elemento clicado junto com o cursor do mouse.

Teste este efeito com o texto abaixo. Clique nele com o mouse, segure o botão clicado e arraste o elemento pela página.

---

Para funcionar você precisa de :

1-Incluir o JQUERY e o JQUERY-UI no seu código:
    <script src="../JQueryEngine/jquery.min.js"></script>
    <script src="../JQueryEngine/jquery-ui.js"></script>

2-Definir um estilo ao elemento arrastável como :
    <style>
        #arrastavel{
            cursor:grab;
            width:300px;
            height: 100px;
            background-color: lightgreen;
        }
    </style>

Assim o elemento fica destacado para efeitos de depuração e visualização é muito útil.

3-Atribuir a classe arrastável ao elemento:
    <script>
        $(function (){
            $('#arrastavel').draggable();
        })
    </script>

4-Finalmente definir o elemento que será arrastável :
            <div id="arrastavel" class="ui-widget-content">
                Este texto encontra-se dentro de uma div que o JQuery atribuiu a classe 'draggable',
                ou seja, arrastável.
            </div>

Agora você sabe como os sites de quebra-cabeças na web funcionam.