Как сохранить положение столбца с помощью Dragula (MySQL / JavaScript / jQuery)

#javascript #php #jquery #mysql #dragula

#язык JavaScript #php #jquery #mysql #драгула

Вопрос:

У меня уже есть загрузка из mysql с помощью dragula для отображения содержимого, но я ни за что на свете не могу понять, как сохранить в mysql, когда столбец изменяется в dragula (функция удаления).. Я бы хотел, чтобы mysql сохранил при удалении из dragula идентификационный номер столбца.

В основном то, что происходит прямо сейчас при загрузке, заключается в том, что он берет идентификатор leadStatusId и добавляет его в столбец-# для загрузки в правильный столбец. Но экономия при сбросе-это не то, что я понимаю. Если бы я мог использовать jquery или javascript для получения нового идентификатора столбца при отбрасывании, чтобы я мог передать его в mysql, это было бы потрясающе.

 lt;div id="bfl" class="boardflowlead"gt;  lt;div class="scrolling-wrapper row flex-row flex-nowrap overflow-auto"gt;  lt;?php $sql = "SELECT  user.userid AS uuid,  user.name AS uname,  user.avatar AS uavatar,  lead_status.id AS leadStatusId,  lead_status.NAME,  lead_status.sort,  lead_status.active,  lead_profile.id AS leadProfileId,  lead_profile.leadStatus,  lead_profile.firstName,  lead_profile.lastName,  lead_profile.firstAgent,  lead_profile.secondAgent,  lead_profile.scheduledBy FROM  user,  lead_status,  lead_profile  WHERE  lead_status.active = 1   AND lead_profile.leadStatus = lead_status.id   AND lead_profile.scheduledBy = user.userid ORDER BY  lead_status.sort ASC"; $result = $mysqli-gt;query($sql);  if ($result-gt;num_rows gt; 0) {  while($row = $result-gt;fetch_assoc()) {  $leadStatusId = $row['leadStatusId'];  $leadStatusName = $row['NAME'];  $leadProfileId = $row['leadProfileId'];  $leadProfileFirstName = $row['firstName'];  $leadProfileLastName = $row['lastName'];  $leadProfileFirstAgent = $row['firstAgent'];  $leadProfileSecondAgent = $row['secondAgent'];  $bfluserid = $row['uuid'];  $bflusername = $row['uname'];  $bflavatar = $row['uavatar'];    echo 'lt;div class="col-bfl-2 boardflowlead" id="column-' . $leadStatusId . '" style="overflow:auto;white-space: nowrap; width: 220px;min-width: 220px;"gt;';  echo 'lt;h4gt;lt;centergt;lt;bgt;' . $leadStatusName . 'lt;/bgt;lt;/centergt;lt;/h4gt;';  if ($leadStatusId = $leadProfileId) {  echo 'lt;div class="card card-full-color card-full-primary" style="width: min-content;"gt;';  echo 'lt;div class="card-header card-header-contrast"gt;lt;stronggt;' . $leadProfileFirstName . ' ' . $leadProfileLastName . 'lt;/stronggt;';  echo 'lt;span class="card-subtitle"gt;lt;bgt;Sale Amount: lt;/bgt;$41,838.35lt;br /gt;lt;bgt;Balance Due: lt;/bgt; $1,205.44lt;/spangt;';  echo 'lt;/divgt;';  echo 'lt;div class="card-body" style="padding: 5px;"gt;';  echo 'lt;div class="buttons-group text-center"gt;';  echo 'lt;span class="badge badge-pill badge-primary" style="margin: 2px;"gt;lt;span class="mdi mdi-time"gt; 26lt;/spangt;lt;/spangt; lt;span class="badge badge-pill badge-primary" style="margin: 2px;"gt;lt;span class="mdi mdi-check"gt; 7/26lt;/spangt;lt;/spangt; lt;span class="badge badge-pill badge-primary" style="margin: 2px;"gt;lt;span class="mdi mdi-attachment"gt; 26lt;/spangt;lt;/spangt;';  if ($uavatar != null) {  echo 'lt;brgt;lt;button class="badge badge-pill badge-primary" style="margin: 2px;" type="button" data-toggle="bs-tooltip" title="' . $uname . '"gt;lt;img src="' . $bflavatar . '" height="32px" width="32px" alt="Avatar"gt;lt;/buttongt;';  } else {  echo 'lt;brgt;lt;button class="badge badge-pill badge-primary" style="margin: 2px;" type="button" data-toggle="bs-tooltip" title="' . $uname . '"gt;lt;img src="assets/img/avatar.png" height="32px" width="32px" alt="Avatar"gt;lt;/buttongt;';  }  echo 'lt;/divgt;';  echo 'lt;a href="./viewLead.php?id=' . $leadProfileId . '" class="stretched-link"gt;lt;/agt;';  echo 'lt;/divgt;';  echo 'lt;/divgt;';  }  echo 'lt;/divgt;';  } } ?gt;  lt;/divgt;  lt;/divgt;  lt;script type="text/javascript"gt;  $(document).ready(function(){  dragula([$("#column-1")[0], $("#column-2")[0], $("#column-3")[0], $("#column-4")[0], $("#column-5")[0], $("#column-6")[0], $("#column-7")[0],   $("#column-8")[0], $("#column-9")[0], $("#column-10")[0], $("#column-11")[0], $("#column-12")[0], $("#column-13")[0], $("#column-14")[0],   $("#column-15")[0], $("#column-16")[0], $("#column-17")[0], $("#column-18")[0], $("#column-19")[0], $("#column-20")[0], $("#column-21")[0],   $("#column-22")[0], $("#column-23")[0], $("#column-24")[0], $("#column-25")[0], $("#column-26")[0], $("#column-27")[0], $("#column-28")[0],   $("#column-29")[0], $("#column-30")[0], $("#column-31")[0], $("#column-32")[0], $("#column-33")[0], $("#column-34")[0], $("#column-35")[0]]);  }); lt;/scriptgt;