Javascript 可拖动面板点击z索引

我有一个带有jQueryUIDragable选项的面板列表，但当我点击其中一个面板时，它会移动到其他面板的下方。我想这样做，当我点击点击面板得到一个z指数高于其他所有人，所以通过这种方式，它显示在其他面板

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>

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

面板可通过以下方式拖动和调整大小：

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

---

您可以使用$（this）以单击的元素为目标

还有!！重要信息将不起作用，因此请删除此项。如果你真的想应用它，你应该这样做为什么风格（）：

你应该用这个

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

而不是

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

但在此之前，你应该这样做

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

把所有的div都带回来

$（这将确保您仅使用单击的div

编辑： 我发现了问题。您应该使用“dragstart”事件更改div的z索引。若要拖动未单击的图元，则表示正在拖动，这就是单击事件不起作用的原因

$(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：

编辑2

---

更新的JSFIDLE:

我不想将z-index 100应用于类“.panel”，我想将其应用于类“ui Dragable”。请查看我的更新答案。这会将z索引添加到您单击的.panel内的.ui可拖动列表中。（它不起作用（我单击的面板没有显示）$（“.panel”）。单击（函数（）{$（这个，'.ui可拖动'）.css（“z索引”，“100；”；}）；尝试以下操作：

$（.panel”）。单击（函数（）{$（这个）。最近的（'.ui可拖动”）.css（“z索引”，“100”）；}）

问题是，在您尝试移动所有div之后，使用您的逻辑，所有div都将处于相同的z索引…您应该找到z索引较高的div，并为单击的div增加一个。或者尝试将所有div的z索引设置为0，并将单击的div的z索引设置为100。对不起，我的英语不是最好的答案。它工作（这不工作…）$（“.panel”）。点击（函数（）{$（这个）.css（'z-index'，'100！important；'）；$（'ui-draggable'））。css（'z-index”，“0”）；}）；@Pedro反转行…你应该把所有的div放回去，然后再把你点击的放在前面。像这样：$（“.panel”）。点击（函数（）{$（'ui-draggable'）。css（“z-index”，“0”）；$（this.css（'z-index'，'100！important；'）；}）；$（.panel”）。单击（函数（）{$（'ui draggable'）。css（'z-index”，“0”）；$（this.css（'z-index'，'100！important；'）；）它不工作（我单击的面板没有显示）对不起，我不明白，代码在$（“.panel”）中。单击（函数（）{我想，对吗？检查编辑…我们应该使用'dragstart'

jQuery.style(name, value, priority);

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

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

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

$(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);
    });
});