turn and drop

dropped images drop on page underneath too

HTML

<script src="http://1.28m.co/js/turn.min.js"></script>
<div class="t">
    <div class="tc rel">
        <div class="book" id="book">
            <div class="page">
                <img src="http://1.28m.co/images/1.jpg" alt="" /><span class="front"></div>
            <div class="page"><img src="http://1.28m.co/images/blank.jpg" alt="" /></div>
            <div class="page"><img src="http://1.28m.co/images/blank.jpg" alt="" /></div>
            <div class="page drop" id="drop4"><img src="http://1.28m.co/images/drag.jpg" alt="" /></div>
            <div class="page" id="page5"><img src="http://1.28m.co/images/blank.jpg" alt="" /></div>
            <div class="page drop" id="drop6"><img src="http://1.28m.co/images/drag.jpg" alt="" /></div>
            <div class="page drop" id="drop7"><img src="http://1.28m.co/images/drag.jpg" alt="" /></div>
            <div class="page drop" id="drop8"><img src="http://1.28m.co/images/drag.jpg" alt="" /></div>
            <div class="page" id="page9"><img src="http://1.28m.co/images/blank.jpg" alt="" /></div>
            <div class="page drop" id="drop10"><img src="http://1.28m.co/images/drag.jpg" alt="" /></div>
            <div class="page drop11" id="drop11"><img src="http://1.28m.co/images/drag.jpg" alt="" /></div>
            <div class="page drop" id="drop12"><img src="http://1.28m.co/images/drag.jpg" alt="" /></div>
            <div class="page drop" id="drop13"><img src="http://1.28m.co/images/drag.jpg" alt="" /></div>
            <div class="page drop" id="drop14"><img src="http://1.28m.co/images/drag.jpg" alt="" /></div>
            <div class="page" id="page15"><img src="http://1.28m.co/images/15.jpg" alt="" /></div>
            <div class="page drop" id="drop16"><img src="http://1.28m.co/images/drag.jpg" alt="" /></div>
            <div class="page"><img src="http://1.28m.co/images/blank.jpg" alt="" /></div>
            <div class="page"><img src="http://1.28m.co/images/back.jpg" alt="" /></div>
        </div>
   ...

CSS

body {
    font:200 16px serif;
}
span.front {
    font:400 32px serif;
    position:relative;
    text-align:center;
    bottom:100px;
    text-align:center;
    width:100%;
}
input {
    border:none;
    border-bottom:1px solid black;
    background-color:transparent;
    width:150px;
}
input.front {
    font:400 32px serif;
    width:40%;
}
#controls {
    position:absolute;
    right:10px;
    top:100px;
    color:white;
}
#controls img {
    width:100px;
}
@media screen and (max-width:1300px) {
    span.front {
        z-index:10000;
        font:400 24px serif;
        bottom:80px;
    }
    input.front {
        font:400 24px serif;
        width:40%;
    }
    .book {
        width: 90%;
        height: 90%;
    }
}
html, body {
    margin: 0;
    height: 100%;
}
body {
    background-color: #333;
}
body.hide-overflow {
    overflow: hidden;
}
/* helpers */
 .t {
    display: table;
    width: 80%;
    height: 100%;
}
.tc {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.rel {
    position: relative;
}
/* book */
 .book {
    margin: 0 auto;
    width: 70%;
    height: 70%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.book .page {
    height: 100%;
}
.book .page img {
    max-width: 100%;
    height: 100%;
}

JavaScript

/*
 * Turn.js responsive book
 */

/*globals window, document, $*/

(function () {
    'use strict';

    var module = {
        ratio: 2,
        init: function (id) {
            var me = this;

            // if older browser then don't run javascript
            if (document.addEventListener) {
                this.el = document.getElementById(id);
                this.resize();
                this.plugins();

                // on window resize, update the plugin size
                window.addEventListener('resize', function (e) {
                    var size = me.resize();
                    $(me.el).turn('size', size.width, size.height);
                });
            }
        },
        resize: function () {
            // reset the width and height to the css defaults
            this.el.style.width = '';
            this.el.style.height = '';

            var width = this.el.clientWidth,
                height = Math.round(width / this.ratio),
                padded = Math.round(document.body.clientHeight * 0.9);

            // if the height is too big for the window, constrain it
            if (height > padded) {
                height = padded;
                width = Math.round(height * this.ratio);
            }

            // set the width and height matching the aspect ratio
            this.el.style.width = width + 'px';
            this.el.style.height = height + 'px';

            return {
                width: width,
                height: height
            };
        },
        plugins: function () {
            // run the plugin
            $(this.el).turn({
                gradients: true,
                acceleration: true
            });
            // hide the body overflow
            document.body.className = 'hide-overflow';
        }
    };

    module.init('book');
}());

$(".drag").draggable({
    drag: function (event, ui) {
        $this = $(this);
        $('.drop').droppable({
            drop: function (event, ui)...