console
var $rows = $('#sortableHolder .bh-row');
var groups = $($rows).toArray().map(function(item, i) {
return i + '';
});
$rows.each(function(i) {
var sorter = Sortable.create(this, {
group: {
name: '' + i,
put: groups
},
draggable: '.tag',
dataIdAttr: 'data-tagid'
});
$(this).data('sorter', sorter);
});
$('#getSort').click(function() {
var groups = [];
$('#sortableHolder .bh-row').each(function() {
groups.push({
WID: $(this).data('groupid'),
tags: $(this).data('sorter').toArray().map(function(id) {
return {
WID: id
};
})
});
});
$(this).next().text(JSON.stringify(groups));
console.log(groups);
});
<div id="sortableHolder" class="bh-mh-16">
<h3 class="sc-title-borderLeft bh-mv-16">基本信息</h3>
<div class="bh-row" data-groupid="1">
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="来校年月1">来校年月1
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="来校年月2">来校年月2
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="来校年月3">来校年月3
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="来校4年月">来校4年月
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="来校5年月">来校5年月
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="6来校年月">6来校年月
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="qw来校年月">qw来校年月
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="来dd校年月">来dd校年月
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="来校ff年月">来校ff年月
</div>
</div>
</div>
<h3 class="sc-title-borderLeft bh-mv-16">在校信息</h3>
<div class="bh-row" data-groupid="1">
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="在校的美好时光">在校的美好时光
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="在校的美好时光2">在校的美好时光2
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="在校的美好时光3">在校的美好时光3
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="来校4年月">来校4年月
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="来校5年月">来校5年月
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="6在校的美好时光">6在校的美好时光
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="qw在校的美好时光">qw在校的美好时光
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="来dd校年月">来dd校年月
</div>
</div>
<div class="tag bh-mb-4 bh-col-md-2" data-tagid="11">
<div class="bh-border-v bh-border-h bh-bColor-info-3 bh-str-cut bh-pv-2 bh-ph-4" title="来校ff年月">来校ff年月
</div>
</div>
</div>
</div>
<button class="bh-btn bh-btn-primary bh-mh-16" id="getSort">获取排序数据</button>