HTML5/jquery sortable

by someprimetime

HTML

<section>
        <ul class="sortable grid">
<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>
    </section>
    
</body>
</html>

CSS

header, section {
            display: block;
        }
        h1, h2 {
            text-align: center;
            font-weight: normal;
        }
        #features {
            margin: auto;
            width: 460px;
            font-size: 0.9em;
        }
        .connected, .sortable, .exclude, .handles {
            margin: auto;
            padding: 0;
            width: 310px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .sortable.grid {
            overflow: hidden;
        }
        .connected li, .sortable li, .exclude li, .handles li {
            list-style: none;
            border: 1px solid #CCC;
            background: #F6F6F6;
            font-family: "Tahoma";
            color: #1C94C4;
            margin: 5px;
            padding: 5px;
            height: 22px;
        }
        .handles span {
            cursor: move;
        }
        li.disabled {
            opacity: 0.5;
        }
        .sortable.grid li {
            line-height: 80px;
            float: left;
            width: 80px;
            height: 80px;
            text-align: center;
        }
        li.highlight {
            background: #FEE25F;
        }
        #connected {
            width: 440px;
            overflow: hidden;
            margin: auto;
        }
        .connected {
            float: left;
            width: 200px;
        }
        .connected.no2 {
            float: right;
        }
        li.sortable-placeholder {
            border: 1px dashed #CCC;
            background: none;
        }

JavaScript

(function($) {
    var dragging, placeholders = $();
    $.fn.sortable = function(options) {
        var method = String(options);

        options = $.extend({
            connectWith: false
        }, options);

        return this.each(function() {
            var isHandle, index, items = $(this).children(options.items);
            var placeholder = $('<' + items[0].tagName + ' class="sortable-placeholder">');

            items.find(options.handle).mousedown(function() {
                isHandle = true;
            }).mouseup(function() {
                isHandle = false;
            });

            $(this).data('items', options.items);
            placeholders = placeholders.add(placeholder);
            if (options.connectWith) {
                $(options.connectWith).add(this).data('connectWith', options.connectWith);
            }

            items.attr('draggable', 'true').on('dragstart', function(e) {
                if (options.handle && !isHandle) {
                    return false;
                }

                isHandle = false;
                var dt = e.originalEvent.dataTransfer;
                dt.effectAllowed = 'move';
                dt.setData('Text', 'dummy');
                index = (dragging = $(this)).addClass('js-sortable-dragging').index();
            }).on('dragend', function() {
                dragging.removeClass('js-sortable-dragging').fadeIn();
                placeholders.detach();
                if (index != dragging.index()) {
                    items.parent().trigger('sortupdate', {
                        item: dragging
                    });
                }
                dragging = null;
            }).not('a[href], img').on('selectstart', function() {
            }).end().add([this, placeholder]).on('dragover dragenter drop', function(e) {
                e.preventDefault();
                if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) {
                   ...