JavaScript-interfeis for moving the boxes between the lots.
-
We've got to make that interface.
JavaScript:
The essence is simple: There are lots inside which the name cards are in, the user grabs any card and drags it into any lot after he presses on the button.Safe."and I'm in
PHPReceive a lot of boats with built-in cards inside.Maybe someone will tell the library.
JavaScriptor better than flames.JQuery?Standard
JqueryUIYes. http://jqueryui.com/droppable/ but there's a lot to do, and I'd like something more close to the task and semi-prepared.
-
The family name element is required to indicate the name in the attribute. data-lname♪ These attributes will be used to produce masses to be sent through AJAX. AJAX design required url to obtain data in the mass $_POST on the server's side.
A job can be seen here. https://jsfiddle.net/oco1b2h2/9/ ♪
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $(function() { // Присваиваем функционал лоткам $("#sortable1, #sortable2").sortable({ connectWith: ".connectedSortable" }).disableSelection();// при клике на "Сохранить" собираем данные из ul с классом 'connectedSortable' $('#saveSortableLists').click(function(event) { var output = []; // массив, в который будем добавлять массивы со списками $('.connectedSortable').each(function(index) { output[index] = $(this).sortable('toArray', { attribute: 'data-lname' }); }); console.log(output); // [Array[3], Array[2]] // Отправляем запрос на сервер и передаем output $.ajax({ url: "send.php", // Куда отправляем запрос пост type: "POST", data: output, }).done(function(response) { // код, который будет выполнен после ответа сервера console.log(response) // Выводим в консоль результат }); });});
</script><body>
<table>
<thead>
<tr>
<td>Лоток 1</td>
<td>Лоток 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default" data-lname="Иванов">Иванов</li>
<li class="ui-state-default" data-lname="Сидоров">Сидоров</li>
<li class="ui-state-default" data-lname="Петров">Петров</li>
</ul>
</td>
<td>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight" data-lname="Малеев">Малеев</li>
<li class="ui-state-highlight" data-lname="Орлов">Орлов</li>
</ul>
</td>
</tr>
</tbody>
</table>
<button type="button" id="saveSortableLists">Сохранить</button>
</body>
Reply to question @Escalion:
<script>
$(function() {
// Присваиваем функционал лоткам
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
stop: function() {
var output = []; // массив, в который будем добавлять массивы со списками
$('.connectedSortable').each(function(index) {
output[index] = $(this).sortable('toArray', {
attribute: 'data-lname'
});
});console.log(output); // [Array[3], Array[2]] // Отправляем запрос на сервер и передаем output $.ajax({ url: "send.php", // Куда отправляем запрос пост type: "POST", data: output, }).done(function(response) { // код, который будет выполнен после ответа сервера console.log(response) // Выводим в консоль результат });}
}).disableSelection();
});
</script>
