Solved

Drag Drop a Copy in Jquery

Posted on 2009-07-15
2
1,468 Views
Last Modified: 2012-05-07
In this example:
http://jqueryui.com/demos/droppable/#photo-manager

How would I make a copy of the photos when drag starts?  I want to drag a clone of the original item, leaving the original item in its place.  I do not want the picture to be deleted when moved to the 'trash' in other words.
See http://jqueryui.com/demos/droppable/#photo-manager

Open in new window

0
Comment
Question by:JayZeeBoy
2 Comments
 
LVL 2

Accepted Solution

by:
SaWey earned 125 total points
ID: 24863240
You can use something like this:
// 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);

 

						$item.find('a.ui-icon-trash').remove();

						var copy = $item.append(recycle_icon).clone();

						copy.appendTo($list).fadeIn(function() {

							copy.animate({ width: '48px' }).find('img').animate({ height: '36px' });

						});

				}

Open in new window

0
 

Author Closing Comment

by:JayZeeBoy
ID: 31603922
Suhweeeet!  Perfect!  Thank you!
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
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)

747 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

10 Experts available now in Live!

Get 1:1 Help Now