JQuery UI 获取放置元素的宽度和高度

Question

如何获取下拉元素的高度和宽度？我尝试了 'ui.draggable.width' 或 'ui.width' 但它不起作用。这是我的代码：

      $('#bagpack').droppable({
            accept: '.item',
            drop: function(ev, ui) {
                  console.log( ui.draggable.width ); // Doesn't work
                 if (ui.offset.left - $(this).offset().left < -20 || ui.offset.top - $(this).offset().top < -20 ||
                      ($(this).offset().left + $(this).width()) - (ui.offset.left + ui.draggable.width / 2)  < 20 ||
                      ($(this).offset().top + $(this).height()) - (ui.offset.top + ui.draggable.height / 2)  < 40 )
                 {
                     $(ui.draggable).draggable({
                         revert: true,
                         stop: function(){
                             $(ui.draggable).draggable('option','revert','invalid');
                         }
                     });
                 }
                 else
                 {
                      itemEquip(ui.draggable, this, ui.offset.left - $(this).offset().left, ui.offset.top - $(this).offset().top);
                 }
            }
    });

Answer 1

在 $(ui.draggable) 元素上使用 height() 和 width() 函数。例如，

$('#bagpack').droppable({
        accept: '.item',
        drop: function(ev, ui) {
            console.log($(ui.draggable).width());
            console.log($(ui.draggable).height());
        }

JQuery UI 获取放置元素的宽度和高度

JQuery UI get width and height of dropped element

jquery

jquery-ui

droppable

draggable