JQuery-使图像保持不变，而不是像示例中那样消失
我正在尝试开发一个简单的购物车，并使用它作为基础。 但是，当我删除图像时，我不希望它从正常列表中消失。最后一天我一直在胡闹，想把它分类，但就是想不出来 这与deleteImage函数有关，我已经删除了位并尝试添加某些部分，请有人给我指出正确的方向。这是我的资料来源，与网站上的资料相同：JQuery-使图像保持不变，而不是像示例中那样消失,jquery,Jquery,我正在尝试开发一个简单的购物车，并使用它作为基础。 但是，当我删除图像时，我不希望它从正常列表中消失。最后一天我一直在胡闹，想把它分类，但就是想不出来 这与deleteImage函数有关，我已经删除了位并尝试添加某些部分，请有人给我指出正确的方向。这是我的资料来源，与网站上的资料相同： <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title&
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Javascript/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
<style type="text/css">
#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: right; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }
#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash h4 .ui-icon { float: left; }
#trash .gallery h5 { display: none; }
</style>
<script type="text/javascript">
$(function () {
// there's the gallery and the trash
var $gallery = $('#gallery'), $trash = $('#trash');
// let the gallery items be draggable
$('li', $gallery).draggable({
cancel: 'a.ui-icon', // clicking an icon won't initiate dragging
revert: 'invalid', // when not dropped, the item will revert back to its initial position
containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
helper: 'clone',
cursor: 'move'
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: '#gallery > li',
activeClass: 'ui-state-highlight',
drop: function (ev, ui) {
deleteImage(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: '#trash li',
activeClass: 'custom-state-active',
drop: function (ev, ui) {
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>';
function deleteImage($item) {
$item.fadeOut(function () {
var $list = $('ul', $trash).length ? $('ul', $trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
$item.find('a.ui-icon-trash').remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function () {
$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
});
});
}
// image recycle function
var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>';
function recycleImage($item) {
$item.fadeOut(function () {
$item.find('a.ui-icon-refresh').remove();
$item.css('width', '96px').append(trash_icon).find('img').css('height', '72px').end().appendTo($gallery).fadeIn();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr('href');
var title = $link.siblings('img').attr('alt');
var $modal = $('img[src$="' + src + '"]');
if ($modal.length) {
$modal.dialog('open')
} else {
var img = $('<img alt="' + title + '" width="384" height="288" style="display:none;padding: 8px;" />')
.attr('src', src).appendTo('body');
setTimeout(function () {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1);
}
}
// resolve the icons behavior with event delegation
$('ul.gallery > li').click(function (ev) {
var $item = $(this);
var $target = $(ev.target);
if ($target.is('a.ui-icon-trash')) {
deleteImage($item);
} else if ($target.is('a.ui-icon-zoomin')) {
viewLargerImage($target);
} else if ($target.is('a.ui-icon-refresh')) {
recycleImage($item);
}
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="demo ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras</h5>
<img src="Images/Teas/one.jpg" alt="The peaks of High Tatras" width="96" height="72" //>
<%-- <a href="Images/Teas/one_high.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>--%>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 2</h5>
<img src="Images/Teas/two.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" //>
<%-- <a href="Images/Teas/two_high.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>--%>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 3</h5>
<img src="Images/Teas/three.jpg" alt="Planning the ascent" width="96" height="72" //>
<%--<a href="Images/Teas/three_high.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>--%>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 4</h5>
<img src="Images/Teas/four.jpg" alt="On top of Kozi kopka" width="96" height="72" //>
<%-- <a href="Images/Teas/four_high.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>--%>
</li>
</ul>
<div id="trash" class="ui-widget-content ui-state-default" style="background-color:Gray;">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>
</div><!-- End demo -->
</form>
</body>
</html>
#图库{浮动：左；宽度：65%；最小高度：12em；}*html#图库{高度：12em；}/*IE6*/
.gallery.custom-state-active{background:#eee；}
.gallery li{浮动：左；宽度：96px；填充：0.4em；边距：0.4em 0.4em 0；文本对齐：居中；}
.gallery li h5{边距：0.4em；光标：移动；}
.画廊李{浮动：对；}
.gallery li a.ui-icon-zoomin{float:left；}
.gallery li img{宽度：100%；光标：移动；}
#垃圾桶{浮动：右；宽度：32%；最小高度：18em；填充：1%；}*html#垃圾桶{高度：18em；}/*IE6*/
#垃圾箱h4{线高：16px；边距：0.4em；}
#垃圾箱h4.ui图标{float:left；}
#垃圾。画廊h5{显示：无；}
$（函数（）{
//有画廊和垃圾桶
变量$gallery=$（“#gallery”），$trash=$（“#trash”）；
//让库项目可以拖动
$（'li'，$gallery）.可拖动({
取消：“a.ui-icon”，//单击图标不会启动拖动
revert:'无效'，//未删除时，项目将还原回其初始位置
包含：$（“#演示帧”）。长度？“#演示帧”：“文档”//如果存在演示帧，请坚持使用
助手：“克隆”，
光标：“移动”
});
//让垃圾可以放下，接受画廊的物品
$trash.dropable({
接受：“#画廊>李”，
activeClass:“ui状态突出显示”，
下拉：功能（ev、ui）{
deleteImage（ui.draggable）；
}
});
//让画廊也可以放下，接受垃圾中的物品
$gallery.droppable({
接受：“#垃圾李”，
activeClass:“自定义活动状态”，
下拉：功能（ev、ui）{
可回收图像（ui.Dragable）；
}
});
//图像删除功能
变量循环_图标=“”；
函数deleteImage（$item）{
$item.fadeOut（函数（）{
var$list=$（'ul'，$trash）.length？$（'ul'，$trash）：$（'ul class=“gallery ui helper reset”/>）.appendTo（$trash）；
$item.find（'a.ui-icon-trash'）.remove（）；
$item.append（回收图标）.appendTo（$list）.fadeIn（函数（）{
$item.animate（{width:'48px'}）.find（'img'）.animate（{height:'36px'}）；
});
});
}
//图像循环功能
var trash_图标=“”；
功能回收年龄（$item）{
$item.fadeOut（函数（）{
$item.find（'a.ui-icon-refresh'）.remove（）；
$item.css（'width'，'96px'）。append（垃圾箱图标）。find（'img'）。css（'height'，'72px'）。end（）。appendo（$gallery）。fadeIn（）；
});
}
//图像预览功能，演示用作模式窗口的ui.dialog
函数viewLargerImage（$link）{
var src=$link.attr（'href'）；
var title=$link.sibbins（'img'）.attr（'alt'）；
var$modal=$（'img[src$=''+src+''']'）；
如果（$modal.length）{
$modal.dialog（‘打开’）
}否则{
变量img=$（'li'）。单击（函数（ev）{
变量$item=$（此项）；
变量$target=$（ev.target）；
如果（$target.is（'a.ui-icon-trash'））{
删除图像（项目）；
}else if（$target.is（'a.ui-icon-zoomin'））{
viewLargerImage（$target）；
}else if（$target.is（'a.ui-icon-refresh'））{
回收年龄（项目）；
}
返回false；
});
});
-
上塔特拉山
-
高级塔特拉斯2
-
高级塔特拉斯3
-
高级塔特拉斯4
垃圾
deleteImage(ui.draggable);
deleteImage(ui.helper);
是原始的，所以删除整个东西不是你想要的…你实际上正在拖动的克隆图像似乎就是你想要的。谢谢，成功了。出于某种原因，垃圾桶上的浮动停止了？你知道吗。答应我这是我的最后一个问题：）@Robert-你有示例页吗？我没有你的图像，所以没有很抱歉，我只是在本地工作，只是想学习Jquery，喜欢拖放。如果你以我第一篇文章中的链接为例，对ui.helper进行更改，它会显示出来。基本上，图像在拖放时不会重新向左对齐。@Robert-你在里面拖放了一个
#trash li{float:left；}