sortablelist plugin based on twitter's bootstrap JS conventions

bootstrap.sortablelist.js

!function ($) {

    "use strict"

    /* SORTABLELIST PUBLIC CLASS DEFINITION
    * ============================== */

    var SortableList = function (element, options) {
        //this.$element = $(element)
        //this.options = $.extend({}, $.fn.sortableList.defaults, options)
        this.init('sortableList', element, options)
    }

    SortableList.prototype = {
        constructor: SortableList,
        init: function (type, element, options) {
            var eventIn
            var eventOut

            this.type = type
            this.$element = $(element)
            this.options = this.getOptions(options)
            this.enabled = true

            this.$element.on("mousedown", this.options.selector, $.proxy(this.mouseDown, this))
            if (this.options.selector) {
                (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' }))
            }
        },
        getOptions: function (options) {
            options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
            return options
        },
        mouseDown: function (e) {
            e.preventDefault()
            if (e.which != 1) return
            var target = $(e.currentTarget).parent()
            var isMoving = target.data("sortableList.moving")
            if (isMoving) return;
            target.data("sortableList.moving", (isMoving = true))
            target.addClass("moving")
            this.makeTargetMovable(target, e.pageY, e.pageX)
            target.before(this.options.placeholder)
            $("body").on("mousemove.sortableList", { target: target }, $.proxy(this.mouseMove, this))
            $("body").on("mouseup.sortableList", { target: target }, $.proxy(this.stopMoving, this))
        },
        stopMoving: function (e) {
            $("body").off(".sortableList")
            var target = $(e.data.target)
            target.removeClass("moving")
            target.css("width", '')
            target.css("height", '')
            target.css("position", '')
            target.css("z-index", '')
            target.css("top", '')
            target.css("left", '')
            target.data("sortableList.moving", "")
            this.$element.find(".placeholder").before(target).remove()
        },
        makeTargetMovable: function (target, mouseY, mouseX) {
            target.data("sortableList.offsetY", mouseY - target.position().top)
            target.data("sortableList.offsetX", mouseX - target.position().left)
            target.css("height", target.height())
            target.css("position", "absolute")
            target.css("z-index", "1000")
            this.moveTarget(target, mouseY, mouseX)
        },
        moveTarget: function (target, mouseY, mouseX) {
            var offsetY = target.data("sortableList.offsetY")
            var offsetX = target.data("sortableList.offsetX")
            target.css("top", mouseY - offsetY)
            target.css("left", mouseX - offsetX)
        },
        mouseMove: function (e) {
            var target = $(e.data.target)
            var isMoving = target.data("sortableList.moving")

            var newPlaceHolderTarget = this.$element.children("li:not(.placeholder)").filter(function (index) {
                if ($(this).hasClass(".position")) return false
                if ($(this).data("sortableList.moving")) return false
                var top = $(this).offset().top
                if (e.pageY < top) return false
                var left = $(this).offset().left
                if (e.pageX < left) return false
                var height = $(this).height()
                if (e.pageY > top + height) return false
                var width = $(this).width()
                if (e.pageX > left + width) return false
                return true
            })[0]
            if (newPlaceHolderTarget != null && this.currentPlaceHolderTarget != newPlaceHolderTarget) {
                this.currentPlaceHolderTarget = newPlaceHolderTarget
                $(newPlaceHolderTarget).before(this.$element.find(".placeholder"))
            }
            if (!isMoving) return
            this.moveTarget(target, e.pageY, e.pageX)
        }


    }

    /* SORTABLELIST PLUGIN DEFINITION
    * ======================== */

    $.fn.sortableList = function (option) {
        return this.each(function () {
            var $this = $(this)
            var data = $this.data('sortableList')
            var options = typeof option == 'object' && option
            if (!data) $this.data('sortableList', (data = new SortableList(this, options)))
        })
    }

    $.fn.sortableList.Constructor = SortableList

    $.fn.sortableList.defaults = {
        selector: 'li:not(.placeholder) .handle',
        placeholder: '<li class="ui-state-highlight placeholder"></li>'
    }

    /* SORTABLELIST DATA-API
    * =============== */

    $(function () {
        $('body').on('mouseenter.sortableList.data-api', '[data-enter^=sortableList]', function (e) {
            $(e.currentTarget).sortableList()
        })
    })
} (window.jQuery);

Not exactly. This is basically just a really simple implementation of this jquery-ui widget: http://jqueryui.com/demos/sortable/

…

-----Original Message----- From: Tony Marschall [mailto:[email protected]] Sent: Tuesday, April 10, 2012 09:21 To: Joseph Daigle Subject: Re: gist gist: 1886722 Is it possible to sort a list with this bootstrap javascript? If yes, howto use this? Thanks.

--- Reply to this email directly or view it on GitHub: https://gist.github.com/1886722

ah, exactly what i am searching. Is the usage the same?

Can pass the handle for this like in jQuery sortable? How to do it?