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. Le problème que je rencontre est que je veux que la photo renvoie à un lien externe et qu'elle puisse être déplacée. Comment puis-je faire cela ?

Je pensais que ce serait aussi simple que d'envelopper l'image avec une balise, mais ça ne marche pas.

Des idées ou des réflexions ?

Le code Jquery que j'utilise est le suivant :

                    $(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 html ressemble :

            <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'avais le retour false au mauvais endroit.