Я пытаюсь получить список значений идентификаторов для каждой группы родительских элементов div. Используя draglua, сайт перетаскивается в группу, затем я хотел бы создать строку словаря, которую я могу отправить на серверную форму и обработать.
Эта строка словаря должна содержать список всех идентификаторов в пределахкаждая группа, мой сценарий ниже в настоящее время работает для одной группы (A), но не для всех групп, предполагая, что есть лучший подход для объединения всех групп в одну?
Так что после того, как пользователь перетянет сайты в группы, я будухотел бы иметь возможность нажимать на применение групп, тогда значение site_groups установлено на
[{group: a, ids: [3,4,5]},{group: b, ids: [31,4]},{group: c, ids: [8]},..etc]
Затем я могу отправить это и обработать его на стороне сервера, кто-нибудь сможет помочь?
Спасибо
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.css"
integrity="sha256-iVhQxXOykHeL03K08zkxBGxDCLCuzRGGiTYf2FL6mLY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style type="text/css">
.drag-space {
width: 100%;
min-height: 20px;
}
</style>
</head>
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper">
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<!-- /.card -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<div class="d-flex flex-row justify-content-between">
<div><i class="fa fa-layer-group fa-fw"></i> Change Groups</div>
<div class="text-muted mb-1 small">
<a class="btn btn-sm btn-outline-primary" id="apply-tab" href="javascript:post();">Apply group changes</a>
</div>
</div>
</div>
<div class="card-body">
<form id="sitegroups_form" method="post">
<input type="text" id="site_groups" />
</form>
<div class="row">
<div class="col-3">
<h4>A - <small class="text-muted">1 Sites</small></h4>
<div id="drag-A" class="drag-space">
<div id="7">
<a href="/sites/site/7/">Aberdeen</a>
</div>
</div>
</div>
<div class="col-3">
<h4>B - <small class="text-muted">0 Sites</small></h4>
<div id="drag-B" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>C - <small class="text-muted">0 Sites</small></h4>
<div id="drag-C" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>D - <small class="text-muted">0 Sites</small></h4>
<div id="drag-D" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>E - <small class="text-muted">0 Sites</small></h4>
<div id="drag-E" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>F - <small class="text-muted">0 Sites</small></h4>
<div id="drag-F" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>G - <small class="text-muted">0 Sites</small></h4>
<div id="drag-G" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>H - <small class="text-muted">0 Sites</small></h4>
<div id="drag-H" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>I - <small class="text-muted">0 Sites</small></h4>
<div id="drag-I" class="drag-space">
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card">
<div class="card-header">
<i class="fa fa-layer-group fa-fw"></i> Sites not in change Groups
</div>
<div class="card-body">
<div class="row" id="drag-source">
<div id="8" class="col-3">
<a href="/sites/site/8/">London</a>
</div>
<div id="9" class="col-3">
<a href="/sites/site/9/">New York</a>
</div>
<div id="10" class="col-3">
<a href="/sites/site/10/">Manchester</a>
</div>
<div id="11" class="col-3">
<a href="/sites/site/11/">Liverpool</a>
</div>
<div id="12" class="col-3">
<a href="/sites/site/12/">Edinburgh</a>
</div>
<div id="13" class="col-3">
<a href="/sites/site/13/">Tokyo</a>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"
integrity="sha256-rVf3H94DblhP4Z6wLSa2mpMwRS5qePBWykE6QWPOaO0=" crossorigin="anonymous"></script>
<script type="text/javascript">
// Begin Dragula JS
var drake = dragula([document.querySelector('#drag-source'), document.querySelector('#drag-A'), document.querySelector('#drag-B'), document.querySelector('#drag-C'), document.querySelector('#drag-D'), document.querySelector('#drag-E'), document.querySelector('#drag-F'), document.querySelector('#drag-G'), document.querySelector('#drag-H'), document.querySelector('#drag-I'),]);
// when item dropped
drake.on('drag', function (el,target,source,sibling) {
el.classList.remove('col-3');
})
// get the items within a group
$("#apply-tab").click(function(){
var a_children = document.querySelectorAll("#drag-A div");
var a_ids = []
for (var i = 0; i<a_children.length; i++) {
a_ids.push(a_children[i].id)
}
var group_a_ids = '{group: a, ids: ['+ a_ids +']}';
$("#site_groups").val(group_a_ids);
});
</script>
<!-- End custom js for this page-->
</body>
</html>