JQuery droppable: get the dragging element properties (height)

Question

I'm implementing standard JQuery drag&drop functionality, though with some specifics: I use custom generated dragging element (using helper function of draggable() initialization):

$("#draggingItem").draggable({
            revert: 'invalid',
            snap: '#myTargetTable td',
            snapMode: "inner",
            snapTolerance: 10,
            zIndex: 100,
            helper: function () {
                var controlContainer = $("<div></div>");
                //fill div content here
                return controlContainer;
            }
        });

I want to make droppable area height fit the dragging object.

And here is where my problem occurs: in the "over" method - I can't get height of the dragging element. At the same time the ui parameter works fine for appending to container in "drop" function.

$("#myTargetTable td").droppable({
            accept: "#draggingItem",
            over: function (event, ui) {
                var origHeight = $(this).height();
                var uiHeight = $(ui).height();
                if (uiHeight > origHeight) {
                    $(this).attr("origHeight", origHeight);
                    $(this).css("height", uiHeight);
                }
            },
            out: function (event, ui) {
                var origHeight = $(this).attr("origHeight");
                if (origHeight) {
                    $(this).css("height", origHeight);
                    $(this).removeAttr("origHeight");
                }
            },
            drop: function (event, ui) {
                $(this).append($(ui));
            }
        });

Firebug console shows error message:

NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle]

I also tried using $(ui.draggable).height() but it returns the original div that was dragged and not the one created by "helper" function.

Do you have any idea how to get height of dragging element?

Answer 1

you can try this:

ui.helper.height()

Both ui.draggable and ui.helper are already jquery objects, so you don't need to wrap them like this $(ui.draggable)