Скопируйте bootstrap td перетаскиванием - PullRequest
Новая
       36

Скопируйте bootstrap td перетаскиванием

0 голосов
/ 05 мая 2020

Здравствуйте, мне нужно, чтобы пользователь мог связать имена таблицы справа с именами таблицы слева, заполняя пустой столбец в левой таблице, так что более одной строки в таблице bootstrap перетаскивают эту значения из другой таблицы, и эти значения не исчезают из исходной таблицы. Итак, я пытаюсь сделать это, используя jquery ui, но это не работает, я могу перетащить только значение кулака, после того, как я перетащил его на удаляемое пустое пространство, оно исчезнет из начальной таблицы и не заполнит другая таблица

Это код 

<script>
    $( function() {
     $( "#draggable").draggable();
     $( "#droppable" ).droppable({
     accept: "#draggable",
     classes: {
     "ui-droppable-active": "ui-state-active",
     "ui-droppable-hover": "ui-state-hover"
     },
    drop: function( event, ui ) {
     $( this )
      .addClass( "ui-state-highlight" )
      .find( "td" )
       }
     });
    });</script>

значения, которые я перемещаю, берутся из базы данных с помощью функции php fetch_array () и находятся в <td> моей второй таблице. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    
    
      <section class="container-fluid row justify-content-between">
      <!--Table-->
      <div class="col table-responsive">
        <table class="table table-hover table-bordered w-auto" id="tabellaSos">
          <!--Table head-->
          <thead class="thead-dark">
            <tr>
              <th>#</th>
              <th>Surname</th>
              <th>Name</th>
              <th id="droppable" class="ui-widget-header"> chosen <th>
            </tr>
          </thead>
          <tbody>
            <tr>
             <th scope="row">1</th>
              <td>Leopardi</td>
              <td>Giacomo</td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
    <!--Table-->


    <div class="row justify-content-center">
      <!--Table-->
      <div class="col table-responsive">
        <table class="table table-hover table-bordered w-auto" id="tabellaSos">
          <!--Table head-->
          <thead class="thead-dark">
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Timecode</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td id="draggable" class="ui-widget-content">Limone Salmone</td>
              <td>SU5</td>
          </tbody>
        </table>
      </div>
    </div>
    <!--Table-->
    </div>
  </section>

1 Ответ

1 голос
/ 05 мая 2020

Непонятно, что вы ищете в своем посте. Вот обновленный пример, основанный на том, что я смог различить. 

$(function() {
  $("#draggable").draggable({
    appendTo: "body",
    helper: function(e) {
      return $("<div>", {
        class: "drag-helper"
      }).html($(e.target).text().trim());
    },
    revert: "invalid"
  });
  $("#tabellaSos > tbody > tr > td:last").droppable({
    classes: {
      "ui-droppable-active": "ui-state-active",
      "ui-droppable-hover": "ui-state-hover"
    },
    drop: function(event, ui) {
      $(this).html(ui.helper.text());
    }
  });
});
.drag-helper {
  border: 1px solid #dee2e6;
  padding: .75rem;
  vertical-align: top;
  box-sizing: border-box;
  color: #212529;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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>
<section class="container-fluid row justify-content-between">
  <!--Table-->
  <div class="col table-responsive">
    <table class="table table-hover table-bordered w-auto" id="tabellaSos">
      <!--Table head-->
      <thead class="thead-dark">
        <tr>
          <th>#</th>
          <th>Surname</th>
          <th>Name</th>
          <th>Chosen</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Leopardi</td>
          <td>Giacomo</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  <!--Table-->
  <div class="row justify-content-center">
    <!--Table-->
    <div class="col table-responsive">
      <table class="table table-hover table-bordered w-auto" id="tabellaSos">
        <!--Table head-->
        <thead class="thead-dark">
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Timecode</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td id="draggable" class="ui-widget-content">Limone Salmone</td>
            <td>SU5</td>
        </tbody>
      </table>
    </div>
  </div>
  <!--Table-->
</section>

Это позволяет пользователю перетаскивать имя из правой таблицы в последний столбец левой таблицы. Поскольку мы создаем новый элемент, я заполнил его текстом из элемента «Перетащить», так что исходный элемент остался нетронутым. Я использовал CSS, чтобы он выглядел как оригинал.

Подробнее: https://api.jqueryui.com/draggable/

...