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拖放动态高度

回答

相关问题