JQuery droppable：获取拖拽元素属性（高度）

Posted 2023-05-08

【中文标题】JQuery droppable：获取拖拽元素属性（高度）

【英文标题】：JQuery droppable: get the dragging element properties (height)

【发布时间】：2013-05-02 15:17:12

【问题描述】：

我正在实现标准的 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”函数创建的那个。

你知道如何获取拖动元素的高度吗？

【参考方案1】：

你可以试试这个：

ui.helper.height()

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