0

我在这里定制了一个简化的“可拖动”功能：Draggable without jQuery-UI，这就是我到目前为止所拥有的：

$.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');
            }
        });

    });
});

我将像这样使用它：$('#mydiv').canDragMe();. 但是我需要根据用户输入打开和关闭元素上的拖动。

所以我的问题是，关闭阻力的最简单方法是什么？喜欢$('#mydiv').canNotDragMe();或可能$('#mydiv').canDragMe(false);（当然需要插件中的输入选项）。

编辑

我知道我需要某种实现从 mousedown 解除上述操作的绑定？或者以某种方式“破坏”插件？

4

1 回答 1

2

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');
            }
        });
    }
});
于 2013-02-19T00:09:38.587 回答