JQuery droppable:获取拖动元素属性(高度)

时间:2013-05-08 11:48:41

标签: javascript jquery drag-and-drop droppable

我正在实现标准的JQuery拖放功能,虽然有一些细节:我使用自定义生成的拖动元素(使用draggable()初始化的辅助函数):

$("#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;
            }
        });

我想让可投影区域高度适合拖动对象。

这就是我的问题出现的地方:在“over”方法中 - 我无法获得拖动元素的高度。同时ui参数适用于在“drop”函数中追加容器。

$("#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控制台显示错误消息:

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

我也尝试使用$(ui.draggable).height(),但它返回拖动的原始div而不是“helper”函数创建的div。

你知道如何获得拖动元素的高度吗?

1 个答案:

答案 0 :(得分:0)

你可以试试这个:

ui.helper.height()

ui.draggable和ui.helper都已经是jquery对象了,所以你不需要像这样包装它们$(ui.draggable)