I’m trying to develop a simple shopping cart and using http://jqueryui.com/demos/droppable/#photo-manager as the base.
However when I drop the Image I don’t want it to disappear from the normal list. I’ve been messing around for the last day try to sort it and just can’t figure it.
it’s got something to do with the deleteImage function, I’ve removed bit and tried adding certain sections, could someone please point me in the right direction. Here is my source it’s the same as on the site though:
<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>
Instead of this:
Delete the
ui.helper, which is the clone, like this:ui.draggableis the original, so deleting the whole thing isn’t what you want…the cloned image that you’re actually dragging though, seems to be what yo’re after.