Question

我有一个表格，我使用JqueryUI，当我拖动一行时，它的样式消失，这是正常的原因，当你拖动行时，这个传递在表格之外。

拖动时创建的元素是<tr>并且具有类.placeholder-style我希望在拖动时保留行中填充的字段。

我该怎么做？

＆＃13;

$("#tabs").tabs();

$("#tbodyproject").sortable({
  items: "> tr",
  appendTo: "parent",
  helper: "clone",
  placeholder: "placeholder-style",
  start: function(event, ui) {

    var cantidad_real = $('.table thead tr th:visible').length;
    var cantidad_actual = $(this).find('.placeholder-style td').length;

    if (cantidad_actual > cantidad_real) {
      var cantidad_a_ocultar = (cantidad_actual - cantidad_real);

      for (var i = 0; i <= cantidad_a_ocultar; i++) {
        $(this).find('.placeholder-style td:nth-child(' + i + ')').addClass('hidden-td');
      }
    }

    ui.helper.css('display', 'table');

  },
  stop: function(event, ui) {
    ui.item.css('display', '')
  },
  update: function(event, ui) {
    let newOrder = $(this).sortable('toArray');
    $.ajax({
        type: "POST",
        url: '/admin/projects/updateOrder',
        data: {
          ids: newOrder
        }
      })
      .done(function(msg) {
        location.reload();
      });
  }
}).disableSelection();

＆＃13;

img {
  width: 100px;
}

.hidden-td {
  display: none !important;
}

.table {
  background-color: green;
  border: 0;
}

.trdrag {
  background-color: yellow;
}

.thcenter {
  background-color: grey !important;
}

.ui-sortable-helper {
  left: 0px!important;
}

.idrow {
  width: 5%;
}

.tdvisible {
  width: 5%;
}

.tdslug {
  width: 10%;
}

.tdimg {
  width: 15%;
}

.tdorder {
  width: 20%;
}

.tdacciones {
  width: 40%;
}

@media (max-width: 500px) {
  .ocultarid {
    display: none;
  }
  .tdslug {
    width: 15%;
  }
}

@media (max-width: 350px) {
  .ocultarvisible {
    display: none;
  }
  .accionesvisible {
    display: none;
  }
  .ordenvisible {
    display: none;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="tabs">
  <div class="col-md-12">
    <div id="table1">
      <table class="table">
        <thead>
          <tr>
            <th class="thcenter ocultarid">ID</th>
            <th class="thcenter ocultarvisible">Visible</th>
            <th class="thcenter slug">Nombre</th>
            <th class="thcenter header">Header</th>
            <th class="thcenter home">Home</th>
            <th class="thcenter ordenvisible">Orden</th>
            <th class="thcenter accionesvisible"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
          </tr>
        </thead>
        <tbody id="tbodyproject">
          <tr id="id1" class="trdrag">
            <td class="idrow tdcenter ocultarid">
              <p id="margindata">1</p>
            </td>
            <td class="hidden-td" style="display:none;">Testing</td>
            <td class="hidden-td" style="display:none;">Testing2</td>
            <td class="tdcenter tdvisible ocultarvisible">
              Yes
            </td>
            <td class="tdslug slug">
              <p id="margindata">Slug</p>
            </td>
            <td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
            <td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
            <td class="tdcenter tdorder ordenvisible">
              <p id="margindata">Order 1</p>
            </td>
            <td class="tdacciones accionesvisible">
              <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a>
                <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                <input type="hidden" name="_token" value="Token 1">Delete
              </form>
            </td>
          </tr>
          <tr id="id1" class="trdrag">
            <td class="idrow tdcenter ocultarid">
              <p id="margindata">2</p>
            </td>
            <td style="display:none;">Testing</td>
            <td class="tdcenter tdvisible ocultarvisible">
              Yes
            </td>
            <td class="tdslug slug">
              <p id="margindata">Slug</p>
            </td>
            <td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
            <td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
            <td class="tdcenter tdorder ordenvisible">
              <p id="margindata">Order 1</p>
            </td>
            <td class="tdacciones accionesvisible">
              <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a>
                <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                <input type="hidden" name="_token" value="Token 1">Delete
              </form>
            </td>
          </tr>
          <tr id="id1" class="trdrag">
            <td class="idrow tdcenter ocultarid">
              <p id="margindata">3</p>
            </td>
            <td style="display:none;">Testing</td>
            <td class="tdcenter tdvisible ocultarvisible">
              Yes
            </td>
            <td class="tdslug slug">
              <p id="margindata">Slug</p>
            </td>
            <td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
            <td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
            <td class="tdcenter tdorder ordenvisible">
              <p id="margindata">Order 1</p>
            </td>
            <td class="tdacciones accionesvisible">
              <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a>
                <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                <input type="hidden" name="_token" value="Token 1">Delete
              </form>
            </td>
          </tr>
          <tr id="id1" class="trdrag">
            <td class="idrow tdcenter ocultarid">
              <p id="margindata">1</p>
            </td>
            <td style="display:none;">Testing</td>
            <td class="tdcenter tdvisible ocultarvisible">
              Yes
            </td>
            <td class="tdslug slug">
              <p id="margindata">Slug</p>
            </td>
            <td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
            <td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
            <td class="tdcenter tdorder ordenvisible">
              <p id="margindata">Order 1</p>
            </td>
            <td class="tdacciones accionesvisible">
              <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a>
                <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                <input type="hidden" name="_token" value="Token 1">Delete
              </form>
            </td>
          </tr>
          <tr id="id1" class="trdrag">
            <td class="idrow tdcenter ocultarid">
              <p id="margindata">4</p>
            </td>
            <td style="display:none;">Testing</td>
            <td class="tdcenter tdvisible ocultarvisible">
              Yes
            </td>
            <td class="tdslug slug">
              <p id="margindata">Slug</p>
            </td>
            <td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
            <td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
            <td class="tdcenter tdorder ordenvisible">
              <p id="margindata">Order 1</p>
            </td>
            <td class="tdacciones accionesvisible">
              <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a>
                <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                <input type="hidden" name="_token" value="Token 1">Delete
              </form>
            </td>
          </tr>
          <tr id="id2" class="trdrag">
            <td class="idrow tdcenter ocultarid">
              <p id="margindata">5</p>
            </td>
            <td class="tdcenter tdvisible ocultarvisible">
              Yes
            </td>
            <td class="tdslug slug">
              <p id="margindata">Slug</p>
            </td>
            <td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
            <td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
            <td class="tdcenter tdorder ordenvisible">
              <p id="margindata">Order 2</p>
            </td>
            <td class="tdacciones accionesvisible">
              <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">

                <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a>
                <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                <input type="hidden" name="_token" value="Token 2">Delete
              </form>
            </td>
          </tr>
        </tbody>
      </table>
      <br><br>
    </div>
  </div>

＆＃13;

https://jsfiddle.net/3g3bt80e/9/

Answer 1

尝试定义td / tr标记css到一定高度＆amp;宽度这可以解决你的问题。

保持拖动时的风格

1 个答案: