jQuery: Add ui-close button to resizable/draggable ?

Question

How can I add a close button to a draggable/resizable div?

I understand that I am essentially describing a dialog, but I have to be able to take advantage of a few of the properties of resizable/draggable (such as containment) that are not a part of dialog.

Any ideas?

Answer 1

I think I may have a solution: create the dialog inside an iframe on your page. the dialog will be contained within the iframe and the iframe is contained within a div...and wha-la, the dialog has "containment".

Answer 2

Better soloution, override the containment option in the ui core: _makeDraggable: function() { var self = this, options = this.options, heightBeforeDrag;

    this.uiDialog.draggable({
        cancel: '.ui-dialog-content',
        handle: '.ui-dialog-titlebar',
        containment: 'document', //override this HARD CODED option
        start: function() {
            heightBeforeDrag = options.height;
            $(this).height($(this).height()).addClass("ui-dialog-dragging");
            (options.dragStart && options.dragStart.apply(self.element[0], arguments));
        },
        drag: function() {
            (options.drag && options.drag.apply(self.element[0], arguments));
        },
        stop: function() {
            $(this).removeClass("ui-dialog-dragging").height(heightBeforeDrag);
            (options.dragStop && options.dragStop.apply(self.element[0], arguments));
            $.ui.dialog.overlay.resize();
        }
    });

I can't believe the developers hard coded this instead of providing the containment option. That's absolutely retarded.