Question

我在使用不同的z-index创建2个元素时遇到问题。

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<link rel="stylesheet" type="text/css" href="jquery.capty.css">
<script src="jquery.capty.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="jquery-jesse.css">
<script type="text/javascript" src="jquery-jesse.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {

      $('.fix').capty({
        cWrapper: 'capty-tile',
        height: 36,
        opacity: .6
      });

      $('#list').jesse();

    });
  </script>
  <style>
    #list {
      max-width: 640px;
      margin: 20px auto;
    }

    div.capty-caption {
        z-index: 999;
    }

  </style>
  <title></title>
</head>

<body>
  <ul class="jq-jesse" id="list">
    <li class="jq-jesse__item">
      <a href='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-1-coloring-page.png' target='_blank'><img class="fix" name="#content-target-1" src='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-1-coloring-page.png' width='100' height='100'></a>
      <div id="content-target-1">
        <a href="#">[x]</a>&nbsp;&nbsp;&nbsp;
      </div>
    </li>
    <li class="jq-jesse__item">
      <a href='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-2-coloring-page.png' target='_blank'><img class="fix" name="#content-target-2" src='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-2-coloring-page.png' width='100' height='100'></a>
      <div id="content-target-2">
        <a href="#">[x]</a>&nbsp;&nbsp;&nbsp;
      </div>
    </li>
  </ul>

</body>

</html>

实施例： http://plnkr.co/edit/8HSgSbc96LlSQ66hgY79?p=info

如何拦截标题上的点击？我正在尝试为z-index: 999设置capty-caption，但这对我不起作用。

Answer 1

您正在寻找的事件已在Simple jQuery Plugin For Drag & Drop Sorting Of Lists - jesse

中详细说明

$('#list').jesse({
   // executed when the item has dropped
   onStop: function(position, prevPosition, item) {
      alert('ok');
   }
});

onStop在mouseup事件结束时执行。如果你不需要这个但只需要你可能总是使用的点击事件（我不鼓励你遵循这条道路）：

$('#list').mouseup(function(e) {
   alert('ok');
});

标题div的z-index

1 个答案: