Simple Jquery Draggable Implemention Without Jquery-ui - How To Turn Off?

I'm customizing a simplified 'draggable' function available here: Draggable without jQuery-UI, and this is what I have so far: $.fn.extend({ canDragMe: function(){

Solution 1:

You can create a basic cannotDragMe method by simply unbinding the handlers that are set in the original method. Since the original is using .on(), you can use .off() to turn them off in the new method.

NOTE: I also noticed that the code you provided was different than the code on the site you referenced. The code on the site had better performance, so I used that instead. I also added namespaces to the .on() and .off() events so that you don't accidentally unbind anything you are not intending to unbind.

Updated jQuery Extend Method - jsfiddle

$.fn.extend({
    cannotDragMe: function () {
        returnthis.each(function () {
            var $this = $(this);
            $this = $(this);
            return $this.css('cursor', 'default').off("mousedown.drag").off("mousemove.drag").off("mouseup.drag");
        });
    },
    canDragMe: function (opt) {
        opt = $.extend({
            handle: "",
            cursor: "move"
        }, opt);

        var $el;
        if (opt.handle === "") {
            $el = this;
        } else {
            $el = this.find(opt.handle);
        }

        return $el.css('cursor', opt.cursor).on("mousedown.drag", function (e) {
            var $drag;
            if (opt.handle === "") {
                $drag = $(this).addClass('draggable');
            } else {
                $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove.drag", function (e) {
                $('.draggable').offset({
                    top: e.pageY + pos_y - drg_h,
                    left: e.pageX + pos_x - drg_w
                }).on("mouseup.drag", function () {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup.drag", function () {
            if (opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });
    }
});