修改後的jquery ui照片管理器問題

Question

我在他們的網站上使用了jquery ui照片管理器示例的修改版本。我遇到的問題是我想讓照片轉到外部鏈接以及被拖動。我該怎麼做呢？

我認爲它會像用標籤包裝圖像一樣簡單，但這不起作用。

任何想法或想法？我使用

jQuery代碼是：

    $(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; 
      }); 



      }); 

html的樣子：

  <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

問題解決了，我只好返回在錯誤的地方錯誤的。