Solved

Drag Drop a Copy in Jquery: Part 2

Posted on 2009-07-15
3
1,641 Views
Last Modified: 2012-05-07
In solution posted for: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_24573409.html

My pal makes a copy of the original item.  However, when you make a copy of that item, it behaves differently (you can't drag it back to the gallery or do anything to it).  I need it to behave exactly like it would if the original was dragged and dropped to the trash.

Would we assign a class to it or something?

Thank you!
See http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_24573409.html

Open in new window

0
Comment
Question by:JayZeeBoy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 2

Expert Comment

by:SaWey
ID: 24863916
You didn't have to create another request imo.

I don't have a complete solution yet, everything works except the recycle button when an image is moved to the trash can.

Replace the functions with these:
<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) {
						var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
 
						var copy = $item.clone();
						copy.find('a.ui-icon-trash').remove();
						copy.append(recycle_icon)
						copy.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'
						});
						copy.appendTo($list).fadeIn(function() {
							copy.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.remove();
					});
				}
 
				// 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> 

Open in new window

0
 
LVL 2

Accepted Solution

by:
SaWey earned 250 total points
ID: 24864109
Now I have the complete solution: change the 'deleteImage' function to this one:


function deleteImage($item) {
                                                var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
 
                                                var copy = $item.clone();
                                                copy.find('a.ui-icon-trash').remove();
                                                copy.append(recycle_icon)
                                                copy.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'
                                                });
                                                copy.appendTo($list).fadeIn(function() {
                                                        copy.animate({ width: '48px' }).find('img').animate({ height: '36px' });
                                                });
                                                $('ul.gallery > li').click(function(ev) {
                                                        var $item = $(this);
                                                        var $target = $(ev.target);
                 
                                                        if ($target.is('a.ui-icon-refresh')) {
                                                            recycleImage($item);
                                                        }
                                                        return false;
                                                });
                                                
                                                
                                }

Open in new window

0
 

Author Closing Comment

by:JayZeeBoy
ID: 31603964
Wonderful! Thank you!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
parse url to form? 7 37
jQuery Dialog Autoresize Bug 2 33
pass foreach data in php into jquery ajax 10 46
JSON/JQuery/AJAX Error Identification 2 29
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question