没有jQuery-UI的简单jQuery可拖动实现-如何关闭? [英] simple jQuery draggable implemention without jQuery-UI - how to turn off?

问题描述

我正在自定义一个简化的可拖动"功能，可在此处使用:无需jQuery-UI即可拖动，这是我到目前为止所拥有的:

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

    });
});

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

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.

所以我的问题是，关闭拖动的最简单方法是什么? $('#mydiv').canNotDragMe();或$('#mydiv').canDragMe(false);(当然，在插件中需要输入选项).

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).

我了解我需要某种实现方式来将上述操作从mousedown上解除绑定?还是通过某种方式销毁"插件?

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

推荐答案

您可以通过简单地取消绑定原始方法中设置的处理程序来创建基本的cannotDragMe方法.由于原始文件使用的是 .on() ，因此您可以使用

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.

更新的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可拖动实现-如何关闭?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！