jQuery ui сортируемые триггеры щелкните в сочетании с colorbox

Question

Я объединил JQuery UI sortable и Jack Moore's colorbox следующим образом. Я показываю набор изображений (например, A1, B1 и C1), которые сортируются по желанию с помощью jQuery UI sortable. Кроме того, я использую colorbox, чтобы можно было щелкнуть по каждому изображению, чтобы запустить lighbox галереи изображений, показывая дополнительные изображения, связанные с каждым из первоначально показанных изображений. Так, например, если я нажимаю на изображение 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"}); 

Проблема в том, я не хочу галерею ColorBox, включив в него изображения, которые могут быть упорядоченные (т.е. A1, B1 и C1). Поэтому, если я нажимаю на изображение A1, галерея shuld показывает только изображения 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, .. не показаны), когда я нажимаю на изображениях. Я также могу сортировать изображения, как ожидалось. Но когда я перетаскиваю изображение, и я его бросаю, открывается галерея colorbox для этого изображения! Я попытался найти некоторую информацию о том, как предотвратить событие «щелчка», которое должно быть запущено после удаления изображения, но я должен признать, что я новичок, и я не знаю, как изменить код для запуска галереи colorbox (см. выше) и/или сортируемый код пользовательского интерфейса jQuery для этого. Любая помощь будет чрезвычайно оценена.

EDIT: см. Демонстрацию проблемы здесь: http://jsfiddle.net/nwe4pjtb/1/ Я теперь видел, что проблема существует при использовании Firefox 33.1. Он отлично работает в Chrome 39.0.2171.71 m