jQuery拖放動態高度

當前我正在創建一個拖放應用程序並使用jQuery-ui。jQuery拖放動態高度

我的問題是當我在我的區域添加容器元素，並在容器內添加RadioButtonElement。所以當我在我的容器只有1或2個無線電元素時，容器高度默認爲300px，但是當我在容器內添加3個或更多RadioButtonElement時，容器高度仍然是300px而不是動態的，它不會改變高度容器。

請看附件。

sample drag and drop

這裏是的jsfiddle：https://jsfiddle.net/2sob2ctf/3/

謝謝烏斯曼

我的代碼：

 var origin = 'sortable'; 
/* 
    Schrittbox 
*/ 
$(".builder .headbox").draggable({ 
    appendTo:".buildplace", 
    connectToSortable:".buildplace", 
    helper: "clone", 
    revert: "invalid", 
    start: function() { 
     origin = 'draggable'; 
    }, 
    stop: function (e, t) { 
     bindDraggable(".headbox .content", ".radioContainer"); 
    } 

}); 

$(".buildplace").droppable({ 
    accept: ".headbox", 
    greedy: true, 
    drop: function (event, ui) { 
     console.log("schrittbox") 
     if (origin === 'draggable') { 
      ui.draggable.html($(".view",ui.draggable).html()); 
      ui.draggable.addClass("dropped"); 
      origin = 'sortable'; 
     } 
    } 
}).sortable(); 
/* ende 

/* 
radioContainer 
*/ 

$(".builder .radioContainer").draggable({ 

    connectToSortable:".headbox >.content", 
    helper: "clone", 

    start: function() { 
     origin = 'draggable'; 
    }, 
    stop: function (e, t) { 
     bindDraggable(".radioContainer .content", ".radioButton"); 
    } 

}); 

/* 
radioButton 
*/ 
$(".builder .radioButton").draggable({ 

    connectToSortable:".radioContainer .content", 
    helper: "clone", 

    start: function() { 
     origin = 'draggable'; 

    }, 


}); 


function bindDraggable(selector, accept){ 
    $(selector).droppable({ 
     accept: accept, 
     greedy: true, 
     drop: function (event, ui) { 
      console.log("radiocontainer") 
      if (origin === 'draggable') { 
       ui.draggable.html($(".view",ui.draggable).html()); 
       origin = 'sortable'; 
      } 
     } 

    }).sortable({ 
     revert: true 
    }); 
}

來源

2016-12-14 Usman

部分是，你用'的容器和孩子都content'類。我會建議你調整'height：300px;'到'min-height：300px;'以允許框增長並且不被鎖定。由於這將適用於這兩個元素，它會導致問題。 – Twisty

我建議你滴利用animate()。它具有采取附加值的優點。

動畫屬性也可以是相對的。如果提供的值的前導字符爲+=或-=，則通過從屬性的當前值中加上或減去給定數字來計算目標值。

例子：

function bindDraggable(selector, accept) { 
    $(selector).droppable({ 
     accept: accept, 
     greedy: true, 
     drop: function(event, ui) { 
     console.log("radiocontainer") 
     var count = $(this).find(".radioContainer").length; 
     if (count > 2) { 
      $(this).animate({ 
      height: "+=60" 
      }, "fast"); 
     } 
     if (origin === 'draggable') { 
      ui.draggable.html($(".view", ui.draggable).html()); 
      origin = 'sortable'; 
     } 
     } 
    }).sortable({ 
     revert: true 
    }); 
    }

歧路小提琴：我看到了問題的https://jsfiddle.net/Twisty/2sob2ctf/6/

來源

2016-12-15 17:00:00 Twisty

jQuery拖放動態高度

回答

相關問題