可拖动面板onclick z-index

Question

我有一个带有jquery ui draggable选项的面板列表，但当我点击其中一个面板时，它会移动到其他面板下面。我想点击点击面板时z-index比其他人高，所以通过这种方式显示在其他面板上。

JSFiddle：

面板的HTML结构：

  <div class="col-xs-6 col-sm-4 col-md-3">
    <div id="14" class="panel panel-off2">
      <div class="panel-heading">
        <div class="row">

      <div class="ptitle">Task 14</div>
    <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="14"></span>
<div class="miniswitch">
    <input type="checkbox" data-id="14">
    <label><i class="glyphicon glyphicon-off"></i></label>
</div> 
  </div> </div>
    </div>
    <div class="panel-body">
      <div class="row">  
        <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <strong>URI:</strong><span>&nbsp;/cron/test</span>
        </div>
      </div>
    </div>
    </div>
  </div>

面板行的HTML结构。

  <div id="tasksList" class="row">
      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="1" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 1</div>

          <div class="optiongroup">  <span  data-toggle="modal" class="glyphicon glyphicon-edit yellow" data-rel="1"></span>


    <div class="miniswitch">
        <input type="checkbox" data-id="12">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div>

        </div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12" id="uri" value="uri">
              <strong>URI:</strong><span>&nbsp;/cron/test/task1</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="2" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 2</div>
           <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="2"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="12">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div>
        </div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test/task2</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="3" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 3</div>
        <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="3"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="3">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div> </div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="4" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 4</div>
         <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="4"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="4">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div></div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="5" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 5</div>
         <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="5"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="5">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div></div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="6" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 6</div>
        <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="6"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="6">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div> </div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="7" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 7</div>
         <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="7"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="7">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div></div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="8" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 8</div>
         <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="8"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="8">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div></div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="9" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 9</div>
        <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="9"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="9">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div> </div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="10" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 10</div>
         <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="10"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="10">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div></div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="11" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 11</div>
         <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="11"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="11">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div></div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="12" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

           <div class="ptitle">Task 12</div>
     <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="12"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="12">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div>
        </div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="13" class="panel panel-success">
          <div class="panel-heading">
            <div class="row">

           <div class="ptitle">Task 13</div>
         <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="13"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="13" checked>
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div>
        </div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="14" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 14</div>
        <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="14"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="14">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div> </div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 col-md-3">
        <div id="15" class="panel panel-off2">
          <div class="panel-heading">
            <div class="row">

          <div class="ptitle">Task 15</div>
         <div class="optiongroup">  <span class="glyphicon glyphicon-edit yellow" data-rel="15"></span>
    <div class="miniswitch">
        <input type="checkbox" data-id="15">
        <label><i class="glyphicon glyphicon-off"></i></label>
    </div> 
      </div></div>
        </div>
        <div class="panel-body">
          <div class="row">  
            <div class="col-xs-12"><strong>Planning:</strong><span>&nbsp;0/10 * * * * ?</span></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <strong>URI:</strong><span>&nbsp;/cron/test</span>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>

默认情况下面板的Z-index：

 .ui-draggable { z-index: 10;}

Onclick事件（我把z-index 100，但它适用于所有面板，而不仅仅是点击的）：

$( ".panel" ).click(function () {
  $(.ui-draggable').css( "z-index", "100 !important;" );
  });

Panel可以拖动并调整大小：

$(function() {
    $( ".panel" ).draggable();
    $( ".panel" ).resizable();
  });

Answer 1

您可以使用$（this）来定位点击的元素。

$( ".panel" ).click(function () {
    $(this, '.ui-draggable').css( "z-index", "100;" );
});

另外，！important不起作用，所以删除它。如果你真的想要应用它，你应该这样做为style（）：

jQuery.style(name, value, priority);

Answer 2

你应该使用这个

$(this).css('z-index', '100 !important;');

而不是

$('.ui-draggable').css( "z-index", "100 !important;" );

但在此之前你应该做

$('.ui-draggable').css( "z-index", "0" );

带回所有div

$（this）将确保您只使用点击的div。

修改 我发现了这个问题。你应该使用＆＃39; dragstart＆＃39; event更改div的z-index。拖动你没有点击的元素，你正在拖动，这就是为什么click事件不起作用。

$(document).ready(function() {
    $('.square').draggable();
    $('.square').on('dragstart', function(event, ui) {
        var maxZIndex = 0;
        $('.square').each(function() {
            if(this.style.zIndex > maxZIndex)
                maxZIndex = this.style.zIndex;
        });
        $(this).css('z-index', maxZIndex + 1);
    });
});

JSFiddle：http://jsfiddle.net/2DH4f/1/

编辑2 更新了JSFiddle：http://jsfiddle.net/2DH4f/3/