如何通過拖放重新排列4個div（使用angular2/4）？

假設我有4個寬度和高度爲100px的div，並且在寬矩形的父div內有一個「float left」。是否有一些優雅的方式可以讓我可以拖放div，並將它們重新排列在寬橫條上？如何通過拖放重新排列4個div（使用angular2/4）？

2017-06-15 Rolando

是使用'float'的要求？ – Zze

目前我正在使用它來對齊頁面上的div，使它們彼此緊鄰。不知道我還能怎麼做。如果還有其他方法可以使它不會使用浮點數並且看起來相同，我很樂於接受這種可能性。 – Rolando

我認爲你可以使用'flex-box'和DOM操作來實現這一點。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ..使用JavaScript來計算拖動元素應該放在哪個索引處，然後'flex-box'應該處理其餘部分。我現在沒有時間提供一個工作示例。 – Zze

這樣的事情？發現的示例瓦特/ jquery的

$(function() { 
 
    $(".column").sortable({ 
 
    connectWith: ".column", 
 
    handle: ".portlet-header", 
 
    cancel: ".portlet-toggle", 
 
    placeholder: "portlet-placeholder ui-corner-all" 
 
    }); 
 

 
    $(".portlet") 
 
    .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
 
    .find(".portlet-header") 
 
    .addClass("ui-widget-header ui-corner-all") 
 
    .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>"); 
 

 
    $(".portlet-toggle").on("click", function() { 
 
    var icon = $(this); 
 
    icon.toggleClass("ui-icon-minusthick ui-icon-plusthick"); 
 
    icon.closest(".portlet").find(".portlet-content").toggle(); 
 
    }); 
 
});

.column { 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    padding-bottom: 100px; 
 
} 
 

 
.portlet { 
 
    margin: 0 1em 1em 0; 
 
    padding: 0.1em; 
 
} 
 

 
.portlet-header { 
 
    padding: 0.2em 0.3em; 
 
    margin-bottom: 0.5em; 
 
    position: relative; 
 
} 
 

 
.portlet-toggle { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 0; 
 
    margin-top: -8px; 
 
} 
 

 
.portlet-content { 
 
    padding: 0.4em; 
 
} 
 

 
.portlet-placeholder { 
 
    border: 1px dotted black; 
 
    margin: 0 1em 1em 0; 
 
    height: 50px; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<body> 
 
    <div class="column"> 
 
    <div class="portlet"> 
 
     <div class="portlet-header">Feed</div> 
 
     <div class="portlet-content">My Feed</div> 
 
    </div> 
 
    <div class="portlet"> 
 
     <div class="portlet-header">News</div> 
 
     <div class="portlet-content">My News</div> 
 
    </div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="portlet"> 
 
     <div class="portlet-header">Shop</div> 
 
     <div class="portlet-content">My Shopping</div> 
 
    </div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="portlet"> 
 
     <div class="portlet-header">Links</div> 
 
     <div class="portlet-content">My Links </div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-06-15 05:49:59 Hash

如何通過拖放重新排列4個div（使用angular2/4）？

回答

相關問題