修改后的jquery ui照片管理器出现问题
我在他们的网站上使用了jquery ui照片管理器示例的修改版本。我的问题是，我想把照片放到一个外部链接上，并且可以拖动。我该怎么做 我原以为它会像用标签包装图像一样简单，但那不起作用 有什么想法吗 我使用的Jquery代码是：修改后的jquery ui照片管理器出现问题,jquery,jquery-ui,Jquery,Jquery Ui,我在他们的网站上使用了jquery ui照片管理器示例的修改版本。我的问题是，我想把照片放到一个外部链接上，并且可以拖动。我该怎么做 我原以为它会像用标签包装图像一样简单，但那不起作用 有什么想法吗 我使用的Jquery代码是： $(function() { // there's the gallery and the favourites var $gallery = $('#icon-gallery'),
$(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;
});
});
$（函数（）{
//有画廊和最喜欢的
变量$gallery=$（'icon gallery'），$Favorites=$（'icon gallery'）；
//让库项目可以拖动
$（'li'，$gallery）.可拖动({
取消：“a.ui-icon”，//单击图标不会启动拖动
还原：“无效”，
助手：“克隆”，
光标：“移动”
});
//让最喜爱的物品可以放下，接受画廊的物品
$Favorites.dropable({
接受：“#图标库>li”，
activeClass:“突出显示”，
下拉：功能（ev、ui）{
addToFavourites（用户界面可拖动）；
}
});
//从收藏夹中删除图像功能
变量循环_图标=“”；
函数deleteImage（$item）{
$item.fadeOut（函数（）{
$item.find（'a.remove-icon'）.remove（）；
$item.animate（{height:'96px'，width:'96px'}）.append（添加图标）.find（'img'）.animate（{height:'48px'，width:'48px'}）.end（）.appendo（$gallery.fadeIn（）；
});
}
//图像添加到收藏夹功能
var add_图标=“”；
函数addToFavourites（$item）{
$item.fadeOut（函数（）{
var$list=$（'ul'，$favorites）.length？$（'ul'，$favorites）：$（'ul class=“gallery clearfix”/>）.appendTo（$favorites）；
$item.find（'a.add-icon'）.remove（）；
$item.append（回收图标）.appendTo（$list）.animate（{height:'128px'，width:'128px'}）.find（'img'）.animate（{height:'96px'，width:'96px'}）.fadeIn（）；
});
}
//通过事件委派解决图标行为
$（'ul.gallery>li'）。单击（功能（ev）{
变量$item=$（此项）；
变量$target=$（ev.target）；
如果（$target.is（'a.add-icon'））{
增加免税额（项目）；
}else if（$target.is（'a.remove-icon'））{
删除图像（项目）；
}
返回false；
});
$（“.btn幻灯片”）。单击（函数（）{
$（“#图标库”）。幻灯片切换（“慢”）；
$（this）.text（$（this）.text（）=='Show icon bank'？'Hide icon bank'：'Show icon bank'）；
$（this）.toggleClass（“btn活动”）；返回false；
});
});
<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>
我的最爱
-
图标的名称
-
图标的名称
-
图标的名称
-
图标的名称
-
图标的名称
-
图标的名称
-
图标的名称
-
图标的名称
-
图标的名称