變形沒有設置位置時，位於引導選項卡內

我使用變形拖動&拖放選項，其中一個容器隱藏在引導選項卡內。在那裏初始化Shapeshift，但不會將項目設置爲位置直到第一次拖動項目。變形沒有設置位置時，位於引導選項卡內

的jsfiddle這個錯誤：https://jsfiddle.net/owm6wo0r/

正如你可以在裏面看到的jsfiddle當您單擊「選項卡2」的所有項目都在一個在另一個上。當你試圖拖動他們時，他們設置了位置。

這裏是插件的文檔：https://github.com/McPants/jquery.shapeshift/wiki/2.0-api-documentation

我試圖與事件「β-重新排列」上單擊選項卡，但它沒有工作...不知道如何解決它？

HTML：

<div class="dragdrop"> 
    <div>Item</div> 
    <div>Item</div> 
    <div>Item</div> 
    <div>Item</div> 
</div> 

<ul class="nav-tabs nav" role="tablist"> 
    <li class="active"> 
    <a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab">Tab 1</a> 
    </li> 
    <li> 
    <a href="#tab2" data-toggle="tab" role="tab" aria-controls="tab2">Tab 2</a> 
    </li> 
</ul> 

<div class="tab-content"> 
    <div id="tab1" role="tabpanel" class="tab-pane active"> 
    <p> Nothing there </p> 
    </div> 
<div id="tab2" role="tabpanel" class="tab-pane"> 
    <div class="dragshared"> 
     <div>Item</div> 
     <div>Item</div> 
     <div>Item</div> 
     <div>Item</div> 
    </div> 
    </div> 
</div>

JS：

$('.nav-tabs a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}); 

$('.dragdrop').shapeshift({ 
selector: "div", 
enableResize: false, 
align: "left", 
paddingX: 0, 
paddingY: 0, 
gutterX: 35, 
gutterY: 70, 
colWidth: 190, 
animated: false, 
minColums: 4, 
dragClone: false, 
enableDrag: true, 
enableCrossDrop: true 
}); 

$('.dragshared').shapeshift({ 
selector: "div", 
enableResize: false, 
align: "left", 
paddingX: 0, 
paddingY: 0, 
gutterX: 35, 
gutterY: 70, 
colWidth: 190, 
animated: false, 
minColums: 4, 
deleteClone: true, 
dragClone: true, 
enableCrossDrop: false 
});

來源

2015-08-13 css-candies

我最後的解決辦法是在visibility: hidden/visible而不是display: block/none，並設置在beggining引導選項卡後，纔再次變身初始化開關顯示器none/block，因爲可見性不能正常工作（desactivated選項卡第二次可見）。

我相信有辦法讓它變得聰明。

CSS

.tab-content>.tab-pane { 
     display: block; 
     visibility: hidden; 
     height: 0; 
     width: 100%; 
     .dragshared { 
     height: 0!important; 
     } 
    } 

    .tab-content>.active { 
     height: auto; 
     visibility: visible; 
     .dragshared { 
     height: auto; 
     } 
    } 

    .tab-content.initialized>.tab-pane { 
     display: none; 
     visibility: visible; 
    } 

    .tab-content.initialized>.tab-pane.active { 
     display: block; 
    }

(shapeshift initialization) 
$('.tab-content').addClass('initialized');

來源

2015-08-17 12:34:32

變形沒有設置位置時，位於引導選項卡內

回答

相關問題