Solved

Drag Drop a Copy in Jquery

Posted on 2009-07-15

jQuery

1 solution

1,480 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

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

Join The Community

2 Comments

LVL 2

Accepted Solution

by:SaWey

SaWey earned 125 total points

ID: 248632402009-07-15

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

Author Closing Comment

by:JayZeeBoy

ID: 316039222009-07-15

Suhweeeet! Perfect! Thank you!

Featured Post

Question has a verified solution.

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

Delegation for dynamic elements using JQuery on()

Article by: Anthony

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…

jQuery

AJAX form submission with customized server field validation

Article by: Julian

This article discusses how to implement server side field validation and display customized error messages to the client.

PHP, jQuery, and Form Actions

Video by: Marco

The viewer will learn how to dynamically set the form action using jQuery.

Introduction to jQuery (Part 1)

Video by: Jason

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)