How can I make TurnJS to actually flip pages with a mouse drag?

Question

I know that Turn JS is a little bit outdated but I still need to use it in one project with a legacy code.

Basically, I'm writing a flipbook for PDF, but I can't find any certain information about how I should implement flipbook with ability to drag its pages with a mouse how I've seen in many demos of TurnJS. It just don't work as it should.

Here's a piece of code which uses turnjs:

<div class="container">
    <div class="card">
        <h5 class="card-header">Чтение книги <a href="/admin/shelf/" class="btn btn-sm btn-primary float-right">Вернуться</a></h5>
        <div class="card-body">
            <h5 class="card-title"><?php echo $item['name'];?></h5>
            <h6 class="card-title"><?php echo $item['author'];?></h5>
            <div id="magazine">
                <div class="page"><span class="text">Page 1</span></div>
                <div class="page"><span class="text">Page 2</span></div>
                <div class="page"><span class="text">Page 3</span></div>
            </div>
        </div>
    </div>
</div>
<style>
    #magazine{
        width: 800px;
        height: 400px;
    }
    #magazine .turn-page{
        background-color:#ccc;
    }
</style>
<script defer>
$(window).ready(function() {
    $('#magazine').turn({
        display: 'single',
        acceleration: true,
        height: 1024,
        width: 1024
    });
});
</script>

jquery and turn.js itself are included in an external header file and both loaded properly. It works when I bind turning pages to keys or clicks, but I can't drag a single page with mouse. Any suggestions?

P.S.

Here's a full code of rendered page: https://pastebin.com/EyDYJ4WR