New Galleries (beautylish)

by someprimetime

HTML

Current gallery thumbnail:
<div id="thumb"><img id="current_thumb" src="" /></div>
<div class="clear"></div>

<div class="left">Your photos:</div>
<div class="clear"></div>
<div id="your_photos">
    <ul class="js-gallery-select-pane">
        <li><a href="#"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt=""/></a></li>
          <li><a href="#"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></a></li>
      </ul>
</div>

<div class="right">(<span id="js-gallery-edit-count">0</span>) photos to edit:</div>

<div id="photos_in_gallery">
    <ul class="js-gallery-edit-pane"></ul>
</div>

<div style="clear: both;"></div>

CSS

#your_photos {
    float: left;
    height: 270px;
    width: 260px;
    display: block;
    overflow-y: scroll;
    
}
.list_placeholder {
    display: inline-block;
    background: #c0c0c0;
    display: block;
    width: 75px;
    height: 75px;
}

.js-remove-gallery-img {
    cursor: pointer;
    color: #fff;
    font-family: helvetica, arial;
    font-size: 12px;
    font-weight: bold;
    display: block;
    background: rgba(0, 0, 0, .8);
    z-index: 400;
    display: block;
    padding: 5px;
    position: absolute;
    right: 0;
}
.js-remove-gallery-img:hover {
    background-color: red;
}
.overlay {
filter: grayscale(100%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
}

#photos_in_gallery {
    float: right;
    height: 260px;
    width: 250px;
    display: block;
    overflow-y: scroll;
}

.left {
    float: left;
}

.right {
    float: right;
}
.clear {
    clear: both;
}
ul {
    list-type: none;
}

li {
    position: relative;
    display: inline-block;
}

li img {
    border: 1px solid #fff;
}

/* drag drop stuff */
.over {
  border: 1px dashed black;
}

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

#thumb {
    width: 75px;
    height: 75px;
    background-color: black;
    display: block;
}

button {
    float: right;
    font-size: 20px;
}
.js-gallery-edit-pane img:active {
    cursor: move;
}

JavaScript

$(function() {
    var newGallery = {
        'gallery_order': '',
        'gallery_thumbnail': ''
    };

    var cssSelectors = {
        'thumbnailContainer': '#thumb',
        'editCount': '#js-gallery-edit-count',
        'selectableListItems': '.js-gallery-select-pane li',
        'editableListItems': '.js-gallery-edit-pane li',
        'removeContainer': '.js-remove-gallery-img'
    };

    var bindDragDrop = function() {
        $.each($(cssSelectors.editableListItems), function(i, val) {
            val.addEventListener('dragstart', handleDragStart, false);
            val.addEventListener('dragenter', handleDragEnter, false);
            val.addEventListener('dragover', handleDragOver, false);
            val.addEventListener('dragleave', handleDragLeave, false);
            val.addEventListener('drop', handleDrop, false);
            val.addEventListener('dragend', handleDragEnd, false);
        });
    };
    
    var randomString = function(stringLength) {
        var i = 0;
        stringLength = stringLength || 10;
        var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
        var randomString = '';
        for (i = 0; i < stringLength; i += 1) {
            var rNum = Math.floor(Math.random() * chars.length);
            randomString += chars.substring(rNum, rNum + 1);
        }
        return randomString;
    };

    var updatePictureCount = function() {
        var currentNum = $(cssSelectors.editableListItems).size();
        $(cssSelectors.editCount).text(currentNum);
    };

    var addPreventClickClass = function($thumbnail) {
        if (!$thumbnail.hasClass('js-gallery-editing')) {
            $thumbnail.addClass('js-gallery-editing');
        }
    };

    var addUniqueId = function($thumbnail) {
        var random = randomString(10);
        $thumbnail.attr('id', 'rand-' + random);
    };

    var updateGalleryThumbnail = function() {
        var $thumbnailImage =...