CODEWITHSUNDEEP
javascriptjqueryjquery-uidraggable
user961627
user961627

Reputation: 12747

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(){
        return this.each(function() {
        var $this = $(this);
        $this = $(this);
        return $this.css('cursor', opt.cursor).on("mousedown", function(e) {
            var $drag = $this.addClass('draggable');
                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.on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                }).on("mouseup", function() {
                    $this.removeClass('draggable');
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
                $this.removeClass('draggable');
            }
        });

    });
});

I'm going to use it like this: $('#mydiv').canDragMe();. But I'm going to need to turn the drag on and off on an element according to user input.

So my question is, what's the simplest way to turn off the drag? Either like $('#mydiv').canNotDragMe(); or maybe $('#mydiv').canDragMe(false); (which would need input options in the plugin of course).

Edit

I understand I need some kind of implementation of unbinding the actions above from mousedown? Or some way to "destroy" the plugin?

Upvotes: 0

Views: 839

Answers (1)

Ruben Infante
Ruben Infante

Reputation: 3135

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 () {
        return this.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');
            }
        });
    }
});

Upvotes: 2

Related Questions