Problème avec le gestionnaire de photos jquery ui modifié

Question

J'utilise une version modifiée de l'exemple de gestionnaire de photos jquery ui sur leur site. Mon problème est que je veux que la photo se rende à un lien externe en plus d'être dragable. Comment puis-je faire cela? Je pensais que ce serait aussi simple que d'emballer l'image avec une étiquette, mais cela ne fonctionne pas.

Des idées ou des pensées?

Code Jquery j'utilise est:

    $(function() { 
      // there's the gallery and the favourites 
      var $gallery = $('#icon-gallery'), $favourites = $('#favourites'); 

      // let the gallery items be draggable 
      $('li',$gallery).draggable({ 
      cancel: 'a.ui-icon',// clicking an icon won't initiate dragging 
      revert: 'invalid', 
      helper: 'clone', 
      cursor: 'move' 
      }); 

      // let the favourites be droppable, accepting the gallery items 
      $favourites.droppable({ 
      accept: '#icon-gallery > li', 
      activeClass: 'highlight', 
      drop: function(ev, ui) { 
       addToFavourites(ui.draggable); 
      } 
      }); 



      // image remove from favourites function 
      var recycle_icon = '<a href="#" title="remove this icon" class="ui-icon remove-icon">Remove icon</a>'; 
      function deleteImage($item) { 

      $item.fadeOut(function() { 
       $item.find('a.remove-icon').remove(); 

       $item.animate({ height: '96px',width: '96px' }).append(add_icon).find('img').animate({ height: '48px',width: '48px' }).end().appendTo($gallery).fadeIn(); 
      }); 
      } 

      // image add to favourites function 
      var add_icon = '<a href="#" title="Add to favourites" class="ui-icon add-icon">Add icon</a>'; 
      function addToFavourites($item) { 
      $item.fadeOut(function() { 
       var $list = $('ul',$favourites).length ? $('ul',$favourites) : $('<ul class="gallery clearfix"/>').appendTo($favourites); 

       $item.find('a.add-icon').remove(); 
       $item.append(recycle_icon).appendTo($list).animate({ height: '128px',width: '128px' }).find('img').animate({ height: '96px',width: '96px' }).fadeIn(); 
            }); 


      } 


      // resolve the icons behavior with event delegation 
      $('ul.gallery > li').click(function(ev) { 
      var $item = $(this); 
      var $target = $(ev.target); 

      if ($target.is('a.add-icon')) { 
       addToFavourites($item); 
      } else if ($target.is('a.remove-icon')) { 
       deleteImage($item); 
      } 

      return false; 
      }); 



      $(".btn-slide").click(function(){ 
      $("#icon-gallery").slideToggle("slow"); 
      $(this).text($(this).text() == 'Show icon bank' ? 'Hide icon bank' : 'Show icon bank'); 
      $(this).toggleClass("btn-active"); return false; 
      }); 



      }); 

le look html comme:

  <div id="favourites" class="ui-widget-content ui-state-default"> 

      <h2>My Favourites</h2> 

      </div> 








      <div class="slider-container"> 

      <ul id="icon-gallery" class="gallery clearfix"> 
      <li > <a href="http://www.google.co.uk" class="icon-link"><img src="images/addressbook.png" alt="Alt tag for the icon" width="48" height="48" /></a> 
      <h5 class="">Name of the icon</h5> 
      <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a> 
      </li> 
      <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png" alt="Alt tag for the icon" width="48" height="48" /></a> 
      <h5 class="">Name of the icon</h5> 
      <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a> 
      </li> 
      <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png" alt="Alt tag for the icon" width="48" height="48" /></a> 
      <h5 class="">Name of the icon</h5> 
      <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a> 
      </li> 

      <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png" alt="Alt tag for the icon" width="48" height="48" /></a> 
      <h5 class="">Name of the icon</h5> 
      <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a> 
      </li> 

      <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png" alt="Alt tag for the icon" width="48" height="48" /></a> 
      <h5 class="">Name of the icon</h5> 
      <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a> 
      </li> 

      <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png" alt="Alt tag for the icon" width="48" height="48" /></a> 
      <h5 class="">Name of the icon</h5> 
      <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a> 
      </li> 

      <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png" alt="Alt tag for the icon" width="48" height="48" /></a> 
      <h5 class="">Name of the icon</h5> 
      <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a> 
      </li> 

      <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png" alt="Alt tag for the icon" width="48" height="48" /></a> 
      <h5 class="">Name of the icon</h5> 
      <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a> 
      </li> 

      <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png" alt="Alt tag for the icon" width="48" height="48" /></a> 
      <h5 class="">Name of the icon</h5> 
      <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a> 
      </li> 

      </ul> 

Answer 1

Problème résolu, j'ai eu le faux retour au mauvais endroit.