Question

我正在自定义一个简化的“可拖动”功能：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解除上述操作的绑定？或者某种方式来“破坏”插件？

Answer 1

您可以通过简单地解除在原始方法中设置的处理程序来创建基本的cannotDragMe方法。由于原始文件正在使用.on()，因此您可以使用.off()在新方法中将其关闭。

注意：我还注意到您提供的代码与site you referenced上的代码不同。网站上的代码具有更好的性能，因此我使用了它。我还在.on()和.off()事件中添加了namespaces，这样您就不会意外取消绑定任何不打算取消绑定的内容。

更新了jQuery扩展方法 - 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');
            }
        });
    }
});

没有jQuery-UI的简单jQuery可拖动实现 - 如何关闭？

修改

1 个答案: