Jquery 当另一个div悬停在顶部时更改div的CSS_Jquery_Draggable_Jquery Ui Droppable

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

jquery

Jquery 当另一个div悬停在顶部时更改div的CSS,jquery,draggable,jquery-ui-droppable,Jquery,Draggable,Jquery Ui Droppable,我有一个可排序的列表如下： <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-BVYiiSIFeK1dGmJRAkycuHAHR

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

  <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>


jQueryUI可排序-示例
.可排序项目{
高度：50px；
宽度：300px；
边框：1px实心rgba（0,0,0,0.1）；
填充顶部：10px；
文本对齐：居中；
字体大小：粗体；
边界半径：0 10px 10px 0；
背景色：#e7f0fe；
颜色：灰色；
保证金：3倍；
}
.sortableItem:悬停{
光标：指针；
}
#可恶的{
浮动：左；
}
#可排序1{
浮动：对；
}
#时代{
浮动：左；
}
.天{
光标：不允许；
背景色：#4885ed；
颜色：白色；
}
.可交换{
z指数：10；
}
.可交换：悬停{
颜色：#4885ed；
}
$（函数（）{
$（“.swapable”）。
可拖动（{revert:true}）。
可降落({
drop：函数（事件、用户界面）{
交换节点（$（this.get（0），$（ui.draggable.get（0））；
}});
});
函数交换节点（a，b）{
var aparent=a.parentNode；
var asibling=a.nextSibling==b？a:a.nextSibling；
b、 parentNode.insertBefore（a，b）；
a.插入前（b，asibling）；
}
点击我
/*$（“#单击”）。单击（函数（）{
var hotelOrder=[]；
对于（变量i=0；i<6；i++）{
hotelOrder.push（sortable.children[i].innerHTML）；
$（“#test”+i）.html（hotelOrder[i]）；
} 
}) */
星期一
1号酒店
2号酒店
3号酒店
4号酒店
5号酒店
星期二
6号酒店
7号酒店
8号酒店
9号酒店
10号酒店
星期三
11号酒店
12号酒店
13号酒店
14号酒店
15号酒店
星期四
16号酒店
17号酒店
18号酒店
19号酒店
20号酒店
星期五
21号酒店
22号酒店
23号酒店
24号酒店
25号酒店
$（'.swapable'）.mouseover（函数（）{
//将ohters元素设置为初始级别
$（this）.this（'.swapable'）.css（'z-index'，10）；
//将单击的元素设置为更高级别
$（this.css（'z-index'，11）；
});

所以我有了我的可排序元素，我可以通过拖动一个div并将其放在另一个div上来交换div。我希望实现的效果如下-当我将某个特定元素拖动到另一个元素的位置时，我希望悬停在上面的div高亮显示，以便用户知道它们处于正确的位置，可以放下div。例如，我想将#draggable2与#draggable6切换，当我将#draggable2拖动到#draggable6时，我希望在拖放元素之前高亮显示#droppable6，以便知道我在正确的位置

我试过了#droppable6：悬停，但显然不起作用。如果有人有任何想法…

如果您使用的是jQuery UI，只需为

.UI droppable active

添加CSS声明即可：

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

这是小部件内置的，根据：

可拖放小部件使用jQueryUICSS框架来设计其外观。如果需要可拖放的特定样式，则以下CSS类名可用于覆盖或作为“类”选项的键：

添加了ui可拖放的活动类。在拖动可拖动部件时添加了这个可拖放的ui可拖放悬停类

编辑：

如果这不能满足您的需要，您可以在设置

.droppable（）

时定义

hoverClass

参数

CSS:

JavaScript:

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

$（“.swapable”）。
可拖动（{revert:true}）。
可降落({
hoverClass:“rollover”/*代码中没有droppable6类或id
$(".swapable").
draggable({ revert: true }).
droppable({
    hoverClass: "rollover", /* <- added this */
    drop:function(event,ui){
        swapNodes($(this).get(0),$(ui.draggable).get(0));
    }});
});