与颜色框结合使用时，jQuery ui 可排序触发器单击

Question

我通过以下方式将 jQuery UI sortable 和 Jack Moore 的 colorbox 结合起来。 我显示了一组图像（例如 A1、B1 和 C1），我使用 jQuery UI 可排序根据需要对其进行排序。此外，我使用 colorbox 来允许单击每个图像，以便启动一个图像库 lightbox，显示与每个最初显示的图像相关联的额外图像。因此，例如，如果我单击图像 A1，我会得到一个显示图像 A1、A2 和 A3 的灯箱。这真的很棒：

    HTML code:
    <ul class="sortable">
            <li class="ui-state-default">
                <a clas="p1gallery" href="A1_url"><img src="A1_url"></a>
            </li>
            <li class="ui-state-default">
                <a class="p2gallery" href="B1_url"><img src="B1_url"></a>
            </li>
    </ul>
    <!-- Hidden links to tell colorbox what images should use -->
    <table>
      <tbody>
            <tr class="even">
                <td>
                  <a class="p1gallery" href="A2_url"></a>
                </td>
                <td>
                  <a class="p2gallery" href="B2_url"></a>
                </td>
            </tr>
      </tbody>
    </table>

    Javascript code:
    $(function() {
       $( "#sortable" ).sortable();
    });
    jQuery('a.p1gallery').colorbox({rel:'p1gallery', transition:"none"});
    jQuery('a.p2gallery').colorbox({rel:'p2gallery', transition:"none"});

问题是我不希望颜色框的图库包含可以排序的图像（即 A1、B1 和 C1）。因此，如果我单击图像 A1，画廊将只显示图像 A2 和 A3。为此，我已按照this question 中的说明“手动”启动 colorbox 的灯箱：

    HTML code:
    <!-- Note that now, these links do not have a class defined, so the images the piont to are not bound by colorbox -->
    <ul class="sortable">
            <li class="ui-state-default">
                <a id="openGallery-p1" href="A1_url"><img src="A1_url"></a>
            </li>
            <li class="ui-state-default">
                <a id="openGallery-p2" href="B1_url"><img src="B1_url"></a>
            </li>
    </ul>
    <!-- Hidden links to tell colorbox what images should use -->
    <table>
      <tbody>
            <tr class="even">
                <td>
                  <a class="p1gallery" href="A2_url"></a>
                </td>
                <td>
                  <a class="p2gallery" href="B2_url"></a>
                </td>
            </tr>
      </tbody>
    </table>

    Javascript code:
    $(function() {
       $( "#sortable" ).sortable();
    });
    var $p1gallery = $('a.p1gallery').colorbox({rel:'p1gallery', transition:"none"});
    $("a#openGallery-p1").click(function(e){
            e.preventDefault();
            $p1gallery.eq(0).click();
    });
    var $p2gallery = $('a.p2gallery').colorbox({rel:'p2gallery', transition:"none"});
    $("a#openGallery-p2").click(function(e){
            e.preventDefault();
            $p2gallery.eq(0).click();
    });

不幸的是，使用最后一个代码，当我单击图像时，画廊按预期工作（即图像 A1，.. 未显示）。我还可以按预期对图像进行排序。但是当我拖动图像并将其放下时，该图像的颜色框画廊就会启动！我试图找到一些关于如何防止在删除图像后触发“点击”事件的信息，但我不得不承认我是一个新手，我不知道我应该如何修改代码以启动颜色框的画廊（见上文）和/或 jQuery 的 UI 可排序代码来实现这一点。任何帮助将不胜感激。

编辑：请参阅此处显示问题的演示：http://jsfiddle.net/nwe4pjtb/1/ 我现在看到使用 Firefox 33.1 时存在问题。它在 Chrome 39.0.2171.71 m

中运行良好

Answer 1

问题解决了！我指定了

clone: "helper"

可排序选项，正如answer 中所推荐的那样，它起作用了。查看带有修复程序here的演示