JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
        <!--<meta http-equiv="content-type" content="text/html; charset=windows-1251" />-->
        <title>Shelf</title>
        <link rel="stylesheet" href="css/general.css" type="text/css" media="all"/>
        <link rel="stylesheet" href="css/reset-min.css" type="text/css" media="all"/>

        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
        <script type="text/javascript" src="js/js.js"></script>

    </head>
    <body>
        <div id="site">
            <div class="margine-top"></div>
            <div id="shelf_container">
                <div class="left-side"></div>
                <div class="shelf">
                    <div id="content">
                        <div class="book1 attr">
                            <div class="menu">
                                <ul>
                                    <li>String 1</li>
                                    <li>String 2</li>
                                    <li>String 3</li>
                                </ul>
                            </div>
                            <div class="title">Book 1</div>
                        </div>
                        <div class="book2 attr">
                            <ul class="menu">
                                <li>String 4</li>
                                <li>String 5</li>
                                <li>String 6</li>
                            </ul>
                            <div class="title">Book 2</div>
                        </div>
                        <div class="book3 attr">
                            <ul class="menu">
                                <li>String 7</li>
                                <li>String 8</li>
                                <li>String 9</li>
                            </ul>
              ...

CSS

/*Общее*/
html, body, #site {height: 100%; width: 100%; background: url('http://tsigel.1gb.ru/shelf2/images/bg.jpg'); font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px}
/*----------------------------------------------------------------------------*/
/*Отступ*/
#site .margine-top {height: 40%}
/*----------------------------------------------------------------------------*/
/*Позиционирование полки*/
#shelf_container {margin: auto; height: 129px; position: relative; max-width: 70%; min-width: 450px; -webkit-user-select: none; -moz-user-select: none}
#shelf_container .left-side {position: absolute; left: 0px; top: 0; z-index: 10;}
#shelf_container .right-side {position: absolute; right: 0; top: 0; z-index: 10;}
#shelf_container .shelf {background: url('http://tsigel.1gb.ru/shelf2/images/shelf.jpg'); height: 129px; width: 100%; margin: auto; position: relative; z-index: 5}
#shelf_container .left-side {width: 16px; height: 129px; background: url('http://tsigel.1gb.ru/shelf2/images/left-side.jpg')}
#shelf_container .right-side {width: 16px; height: 129px; background: url('http://tsigel.1gb.ru/shelf2/images/right-side.jpg'); -webkit-user-select: none; -moz-user-select: none}
/*----------------------------------------------------------------------------*/
/*Содержимое полки*/
#content {padding: 20px 0 0 0; position: relative; margin: 0 15px; height: 109px; -webkit-user-select: none; -moz-user-select: none}
#content .attr {width: 62px; height: 92px; display: inline-block; border: solid 2px #000; position: absolute; z-index: 5; -webkit-user-select: none; -moz-user-select: none}
#content .attr:hover {border: solid 2px #fff; cursor: pointer}
#content .attr:hover .title {display: block;}
#content .book1 {background: url('http://tsigel.1gb.ru/shelf2/images/book1.jpg') no-repeat;}
#content .book2 {background: url('http://tsigel.1gb.ru/shelf2/images/book2.jpg') no-repeat;}
#content .book3 {background: url('http://tsigel.1gb.ru/shelf2/images/book3.jpg')...

JavaScript

//Обьявдяем глобальные переменные
var anemateSpeed = 500;
var num, //количество книг
    margin = 7,
    $book;

//------------------------------------------------------------------------------------------------------------------
//Объявляем объект "книга"
var Book = function ($dom, $shelf) {
    this.$ = $dom;
    this.width = this.$.width();
    this.x = parseInt(this.$.css('left'));
    this.$shelf = $shelf;
    this.$.data('book', this);
    this.init();
}
//Инициализация обработчиков книги
Book.prototype.init = function () {
    this.$.mousedown(this.handlers.mousedown);
    this.$.mouseup(this.handlers.mouseup);
}
//Назначение обработчиков
Book.prototype.handlers = {
    mousedown:function (e) {
        var book = $(this).data('book');
        book.onMousedown(book.getX(e.pageX));
    },
    mouseup:function () {
        Book.getActive().onMouseup();
    },
    mousemove:function (e) {
        var book = Book.getActive();
        book.onMove(book.getX(e.pageX));
    }
};

//Методы объекта книга
//Управлеие
Book.prototype.onMousedown = function (x) {
    Book.setActive(this);
    this.currentDelta = this.getDelta(x);
    this.$.css({
        'z-index' : '100',
        'cursor' : 'crosshair'
    });
    $(document).bind('mousemove', this.handlers.mousemove);
};

Book.prototype.onMouseup = function () {
    $(document).unbind('mousemove', this.handlers.mousemove);
    this.x = parseInt(this.$.css('left'));
    this.$.css({
        'z-index' : '5',
        'cursor' : 'default'
    });
    this.plaseInit();
};

Book.prototype.onMove = function (x) {
//    this.$.css('left', Math.max(Math.min(this.$shelf.width() - this.width,x - this.currentDelta),0));
    if (x - this.currentDelta > 2 && (x - this.currentDelta) < this.$shelf.width() - this.width - 2) {
        this.$.css('left', x - this.currentDelta);
    } else {

    }

    if (this.getNext()) {
        if (this.getCenter() > this.getNext().x) {
            this.getNext().moveBeack();
           ...