Question

我有一个可排序的列表，如下所示：

  <html>
  <head>
  <title>jQuery UI Sortable - Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> </script>

  <style>
      .sortableItem {
          height: 50px;
          width: 300px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          padding-top: 10px;
          text-align: center;
          font-weight: bold;
          border-radius: 0 10px 10px 0;
          background-color: #e7f0fe;
          color: gray;
          margin: 3px;
      }

      .sortableItem:hover {
          cursor: pointer;
      }



      #sortable {
          float: left;
      }

      #sortable1 {
          float: right;
      }

      #times {
          float: left;
      }

      .day {
            cursor: not-allowed;
          background-color:#4885ed;
          color: white;
      }

      .swapable {
          z-index:  10;
      }

      .swapable:hover {
          color: #4885ed;
      }



  </style>

  <script>


      $(function() {
$(".swapable").
draggable({ revert: true }).
droppable({
    drop:function(event,ui){
        swapNodes($(this).get(0),$(ui.draggable).get(0));
    }});
});


function swapNodes(a, b) {
var aparent= a.parentNode;
var asibling= a.nextSibling===b? a : a.nextSibling;
b.parentNode.insertBefore(a, b);
aparent.insertBefore(b, asibling);
}

  </script>

  </head>

  <body>

   <button id="click">Click me</button>





   <script>


    /* $("#click").click(function() {
        var hotelOrder = [];
        for(var i = 0; i < 6; i++) {

     hotelOrder.push(sortable.children[i].innerHTML);
    $("#test"+i).html(hotelOrder[i]);
        } 
    }) */

   </script>

   <div id = "sortable" class="ui-state">

        <div class = "sortableItem swapable ui-state-default day">Monday</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable1">Hotel 1</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable2">Hotel 2</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable3">Hotel 3</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable4">Hotel 4</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable5">Hotel 5</div>



          <div class = "sortableItem day">Tuesday</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable6">Hotel 6</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable7">Hotel 7</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable8">Hotel 8</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable9">Hotel 9</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable10">Hotel 10</div>


          <div class = "sortableItem day">Wednesday</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable11">Hotel 11</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable12">Hotel 12</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable13">Hotel 13</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable14">Hotel 14</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable15">Hotel 15</div>


          <div class = "sortableItem day">Thursday</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable16">Hotel 16</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable17">Hotel 17</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable18">Hotel 18</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable19">Hotel 19</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable20">Hotel 20</div>


         <div class = "sortableItem day">Friday</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable21">Hotel 21</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable22">Hotel 22</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable23">Hotel 23</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable24">Hotel 24</div>
         <div class = "sortableItem swapable ui-state-default" id="draggable25">Hotel 25</div>

      </div>

   <script>


  $('.swapable').mouseover(function() {
 // set ohters element to the initial level
 $(this).siblings('.swapable').css('z-index', 10);
 // set clicked element to a higher level
 $(this).css('z-index', 11);
 });

   </script>

所以我有我的Sortable元素，可以通过拖动一个拖放到另一个之上来交换div。我想要实现的效果如下-当我将特定元素拖动到另一个位置时，我希望突出显示要悬停的div，以便用户知道它们处于正确的位置以将div放下。举例来说，假设我想将＃draggable2与＃draggable6切换，当我将＃draggable2拖动到＃draggable6时，我希望在放置元素之前突出显示＃droppable6，以便知道自己在正确的位置。

我尝试了＃droppable6：hover，但是显然不起作用。如果有人有什么想法...

Answer 1

如果您使用的是jQuery UI，只需为.ui-droppable-active添加CSS声明，如：

.ui-droppable-active {
    font-weight: bold;
    background: #ff0000;
    color: #fff;
    /* other styles */
}

根据the documentation，它内置于小部件中：

droppable小部件使用jQuery UI CSS框架来设置其外观样式。如果需要特定于可放置样式的样式，则可以将以下CSS类名称用于替代或用作classes选项的键：

ui-droppable-active类已添加。当拖动一个可拖动的   此droppable，将添加ui-droppable-hover类。

编辑：

如果这样无法满足您的需要，则可以在设置hoverClass时定义一个.droppable()参数。

CSS：

.rollover {
    font-weight: bold;
    background: #ff0000;
    color: #fff;
    /* other styles */
}

JavaScript：

$(".swapable").
draggable({ revert: true }).
droppable({
    hoverClass: "rollover", /* <- added this */
    drop:function(event,ui){
        swapNodes($(this).get(0),$(ui.draggable).get(0));
    }});
});

当另一个div悬停在顶部时，更改div的CSS

1 个答案: