css - 如何将 jQuery 可排序 UI 与占位符的静态标题相结合？

Question

我有一组可排序的图片，使用 jQuery UI 实现。我想将每张图片都放在一个盒子里，并在顶部加上一个标题。图片排序时，方框及其标题不应移动。有没有简单的方法可以做到这一点？

编辑:我进行了一些调查，发现了一种可以解决问题的方法。它包括使用

锁定某些元素的位置

class: static

(参见此 question 的第二个答案)和此 demo .

不幸的是，当我将图像插入列表时，它不再正常工作:demo .

Answer 1

看起来您需要的是可拖放小部件的组合，而不是可排序小部件。我称之为“可交换”:P

您可以通过在放置事件中交换图像来实现此目的，如下所示:

$("#swappable img").draggable({
  revert: "invalid",
  zIndex: 1
});
$("#swappable .placeholder").droppable({
  snap: true,
  snapMode: "inner",
  drop: function(event, ui) {
    var $existing = $(this).find("img.ui-draggable");
    if ($existing)
    /* droppable already contain an image, append it to the parent of
        dropped item. */
      ui.draggable.parent().append($existing);

    ui.draggable.css({ // reset the positioning applied by widget
      top: 0,
      left: 0
    }).appendTo(this);
  }
});

#swappable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#swappable li {
  border: 1px solid black;
  background-color: cream;
}
#swappable li span {
  /*style anyway you want*/
}
#swappable li img {
  width: 50px;
  height: 50px;
}
#swappable li .placeholder {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px;
  background: #eee;
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<ul id="swappable">
  <li>
    <div class="placeholder">
      <img src="http://i46.tinypic.com/2epim8j.jpg" />
    </div>
    <span>
       Item Description 1
     </span>
  </li>
  <li>
    <div class="placeholder">
      <img src="http://i49.tinypic.com/28vepvr.jpg" />
    </div>
    <span>
       Item Description 2
     </span>

  </li>
  <li>
    <div class="placeholder">
      <img src="http://i50.tinypic.com/f0ud01.jpg" />
    </div>
    <span>
       Item Description 3
     </span>
  </li>
</ul>