implement option draggable about bootstrap-modal

[Yohn]

heres what I've been using.., thanks to hompimpaalaihumgambreng

jquery

$('.modal').drags({handle: '.modal-header'})

// Simple JQuery Draggable Plugin
// https://plus.google.com/108949996304093815163/about
// http://hompimpaalaihumgambreng.blogspot.com/2012/06/draggable-without-jquery-ui.html#.UJ4VxmckTg0
// Usage: $(selector).drags();
// Options:
// handle => your dragging handle.
//           If not defined, then the whole body of the
//           selected element will be draggable
// cursor => define your draggable element cursor type

(function($) {
    $.fn.drags = function(opt) {

        opt = $.extend({handle:"",cursor:"move"}, opt);

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

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $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", function(e) {
            $drag.parents().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').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });

    }
})(jQuery);

[jschr]

Hey, thanks for the issue but I don't think I will be implementing this directly in Bootstrap Modal at this time. I think it's a bit out of scope for this plugin and as @Yohn suggests, there are a few libraries dedicated to this functionality already.

[gbelmm]

extend option ?

$().modal({ drags: true })

[jschr]

The issue I have with this is I would need to either:

1. Include a library into Bootstrap-Modal
2. Test if a library exists in Bootstrap-Modal

Both involve to some degree choosing a library, I would much rather the developer have that choice. It will also muddy up the code to directly include a library, especially when the feature is really only desirable in a desktop enviroment. This is why I believe it to be out of scope for this plugin. As @Yohn pointed out in his example, it is fairly trivial to add the support yourself.

[emage]

@Yohn

I am using your drag function, however, is it possible to reset to its original position upon relaunch?

Currently, if I close the modal and open it again, it stays at the previously dragged position.. So if i dragged one of my modal off screen a bit, the next one is stayed off screen.

Thanks

[Yohn]

@emage

what you could do is when the modal is shown, get the offset so you have the original placement - var offset = $('.modal').offset(); , and then when its hidden reset the offset positions to the original placement.. $('.modal').offset({top: offset.top, left: offset.left})

I havent tested this as I havent played with it in a few months, but in theory it should work.

[anandu4u]

@Yohn

Thanks for the code. It's working for me.
The issue I have with this is, is it possible to reset to its original position upon relaunch?

[Yohn]

I believe you could do something like $('.modal').modal('layout') to reposition the modal to the center of the screen.

[ptma]

@anandu4u

Reset to original position :
$('body').on('hidden.bs.modal', function() { $('.modal').css({'top': '', left:''}); });