使用jquery，CSS和JS将鼠标悬停在可放置区域时如何获得下拉突出显示？

Question

我想将n个项目从一个表格拖到另一个表格上。到目前为止这个工作。现在我想突出显示表中要删除这些项目的单元格。

当我将元素悬停在它上面时，它应该显示边框或单元格背景。我尝试了jquery drop，但是无法让它工作，它会引发一个未被捕获的错误。

我无法理解这一点。

到目前为止，下面是我的代码。

＆＃13;

＆＃13;

/* Below is search for the Table Assignment Board */
$(function() {
  $.expr[':'].containsIgnoreCase = function(n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
  };

  $('#reservationManagerListTableNumberInput').keyup(function(e) {
    clearTimeout($.data(this, 'timer'));
    if (e.keyCode == 13)
      search(true);
    else
      $(this).data('timer', setTimeout(search, 100));
  });
});

function search(force) {
  if (this.value == '') {
    $('#table2 tbody tr').show();
    return;
  }
  var word = $('#reservationManagerListTableNumberInput')[0].value;
  var word_filter = $('#table2 tbody tr');
  if ($.trim(word) != '')
    word_filter = word_filter.filter(':containsIgnoreCase(' + word + ')');
  $('#table2 tbody tr').hide();
  word_filter.show();
}

/* Drag and Drop action from Table Reservation to Table Assignment Schedule */

function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
  document.getElementById("resElement").innerHTML = "Drop Reservation on table slot";
}

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  document.getElementById("resElement").innerHTML = "Reservation preassigned with table";
}

/* Below visual drop effect */

$(function() {
      $("#dragtarget").draggable();
      $("#droptarget").droppable({
        classes: {
          "ui-droppable-hover": "ui-state-hover"
        },
        drop: function(event, ui) {
          $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
        }
      });

＆＃13;

#table2 th+th,
#table2 td+td,
#table2 th,
#table2 td {
  border-left: 2px solid #F5F5F5;
  border-bottom: 2px solid #F5F5F5;
  font-size: 0.75vw;
}

#table1 th+th,
#table1 td+td,
#table1 th,
#table1 td {
  border-left: 2px solid #F5F5F5;
  border-bottom: 2px solid #F5F5F5;
  font-size: 0.75vw;
}

.tableinfoTime {
  Width: 60px;
}

.tableinfo {
  Width: 52.3px;
}

.scheduleHeader {
  Width: 52px;
}

.scheduleHeaderTop {
  Width: 52.3px;
}

.scheduleHeaderText {
  font-size: 0.6vw;
  vertical-align: middle;
}

.reservationListHeaderText {
  font-size: 0.6vw;
  vertical-align: middle;
}

.reservationListItemText {
  font-size: 0.75vw;
  vertical-align: middle;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<!--  Below is Dining Schedule -->

<div class="container-fluid" id="main_container">
  <!-- tables inside this DIV could have draggable content -->

  <div class="row">



    <!-- left container (table with subjects) -->
    <div class="col-lg-4" style="background-color: none;" id="left">
      <table class="table table-fixed table-sm">
        <th>
          Search by any criteria <span class="badge badge-default">3 letters minimum</span>
        </th>
      </table>

      <input style="margin-top:0.5em" class="form-control" type="text" id="reservationManagerListInput" placeholder="Search for reservation.. ">
      <table class="table table-fixed table-sm table-hover" style="margin-top:0.5em;">
        <thead>
          <tr>
            <th>
              <div class="reservationListHeaderText">
                Res ID
              </div>
            </th>
            <th>
              <div class="reservationListHeaderText">
                Table Type
              </div>
            </th>
            <th>
              <div class="reservationListHeaderText">
                Time
              </div>
            </th>
            <th>
              <div class="reservationListHeaderText">
                Pax
              </div>
            </th>
            <th>
              <div class="reservationListHeaderText">
                Cabin
              </div>
            </th>
            <th>
              <div class="reservationListHeaderText">
                Name
              </div>
            </th>
            <th>
              <div class="reservationListHeaderText">
                Status
              </div>
            </th>
            <th>
              <div class="reservationListHeaderText">
                SR
              </div>
            </th>
          </tr>
        </thead>
        <tbody class="">
          <tr>
            <td>
              <div class="droptarget reservationListItemText" ondrop="drop(event)" ondragover="allowDrop(event)">
                <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">
                  Drag me
                </p>
              </div>
            </td>
            <td>
              <div class="reservationListItemText">
                0
              </div>
            </td>
            <td>
              <div class="reservationListItemText">
                0
              </div>
            </td>
            <td>
              <div class="reservationListItemText">
                0
              </div>
            </td>
            <td>
              <div class="reservationListItemText">
                0
              </div>
            </td>
            <td>
              <div class="reservationListItemText">
                0
              </div>
            </td>
            <td>
              <div class="reservationListItemText">
                0
              </div>
            </td>
            <td>
              <div class="reservationListItemText">
                0
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- End left container -->



    <div class="col-lg-8" style="background-color: none;">
      <table class="table table-fixed table-sm">
        <th>
          <label>Table assignment Schedule</label>
        </th>
        <th>
          <p class="reservationListItemText" id="resElement"></p>
        </th>
      </table>





      <!-- right container -->
      <div id="right">
        <input style="margin-top:0.5em margin-bottom: 0.5em;" class="form-control" type="search" id="reservationManagerListTableNumberInput" placeholder="Search for any table or Reservation.. ">
        <table class="table table-responsive table-sm table-hover" style="margin-top:0.5em;" id="table2">
          <thead class="header">
            <tr>
              <!-- if checkbox is checked, clone reservation subjects to the whole table row  -->
              <th>
                <div class="scheduleHeaderTop">
                  <input id="week" type="checkbox" title="Preassign Table by drag and drop Reservation in each slot" checked/>
                  <input id="report" type="checkbox" title="Show Assignment report" /></div>

              </th>
              <th>
                <div class="scheduleHeaderTop">Ttl Tbl.</div>
              </th>
              <th>
                <div class="scheduleHeaderTop">Ttl Bkg.</div>
              </th>
              <th>
                <div class="scheduleHeaderTop">Ttl Pax</div>
              </th>
              <th>
                <div class="tableinfoTime">11:00</div>
              </th>
              <th>
                <div class="tableinfoTime">11:30</div>
              </th>
              <th>
                <div class="tableinfoTime">12:00</div>
              </th>
              <th>
                <div class="tableinfoTime">12:30</div>
              </th>
              <th>
                <div class="tableinfoTime">13:00</div>
              </th>
              <th>
                <div class="tableinfoTime">13:30</div>
              </th>
              <th>
                <div class="tableinfoTime">14:00</div>
              </th>
              <th>
                <div class="tableinfoTime">14:30</div>
              </th>
              <th>
                <div class="tableinfoTime">17:00</div>
              </th>
              <th>
                <div class="tableinfoTime">17:30</div>
              </th>
              <th>
                <div class="tableinfoTime">18:00</div>
              </th>
              <th>
                <div class="tableinfoTime">18:30</div>
              </th>
              <th>
                <div class="tableinfoTime">19:00</div>
              </th>
              <th>
                <div class="tableinfoTime">19:30</div>
              </th>
              <th>
                <div class="tableinfoTime">20:00</div>
              </th>
              <th>
                <div class="tableinfoTime">20:30</div>
              </th>
              <th>
                <div class="tableinfoTime">21:00</div>
              </th>
              <th>
                <div class="tableinfoTime">21:30</div>
              </th>
              <th>
                <div class="tableinfoTime">22:00</div>
              </th>
            </tr>
          </thead>
          <tbody class="reservationManagerScrolltbody">
            <tr>
              <td colspan="24" class="reservationManagerTableType">
                <table class="table table-responsive table-fixed table-sm waiterStationtableinfoTime">

                  <thead class="header" id="TableAssignmentSchedule_thead">
                    <tr>
                      <th>
                        <div class="scheduleHeaderText">Table Number</div>
                      </th>
                      <th>
                        <div class="scheduleHeaderText">Table Type</div>
                      </th>
                      <th>
                        <div class="scheduleHeaderText">Bookings Assigned</div>
                      </th>
                      <th>
                        <div class="scheduleHeaderText">Guest Assigned</div>
                      </th>
                      <th colspan="20" style="text-align:center;"> Waiterstation 1</th>
                    </tr>
                  </thead>
                  <tbody id="TableAssignmentSchedule_tbody">
                    <tr>
                      <td>
                        <div class="scheduleHeader">146</div>
                      </td>
                      <td>
                        <div class="scheduleHeader">2 TOP</div>
                      </td>
                      <td>
                        <div class="scheduleHeader">6</div>
                      </td>
                      <td>
                        <div class="scheduleHeader">16</div>
                      </td>
                      <td>
                        <div class="tableinfoTime">&nbsp;</div>
                      </td>
                      <td>
                        <div class="tableinfoTime droptarget" ondrop="drop(event)" ondragover="allowDrop(event)" id="droptarget">here</div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                      <td>
                        <div class="tableinfoTime"></div>
                      </td>
                    </tr>
                  </tbody>
                </table>
      </div>
      <!-- right container -->
    </div>
    <!-- drag container -->
  </div>
  <!-- main container -->

</div>

＆＃13;

＆＃13;

＆＃13;