Solved

Drag Drop a Copy in Jquery: Part 2

Posted on 2009-07-15
3
1,635 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
  • 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Select2 jquery help 9 74
gif overlay 3 43
Dynamic Google Map in Bootstrap Modal 7 37
jquery wizard next doesn't go to top of tab 4 53
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

895 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now