drag and drop

[campi]

hallo zusammen,

ich versuche nun seit stunden eine loesung fuer mein problem zu finden, schaffe es aber nicht.

ich moechte aus einem pool von bildern ein paar wenige (4-6 stueck) aussuchen koennen, indem ich sie von ihrem ursprungsort aus in dafuer vorgesehene zielfelder verschiebe...per drag and drop.

nun habe ich etwas gefunden, das genau dem entspricht...allerdings mit text, verschachtelt in p elementen. hier die seite dazu: http://brain4.de/programmierecke/js/dragNdrop.php#start

um den text greifen zu koennen wird hier ein bild verwendet, das einen greifer darstellt. beim loslassen im zielfeld verschwindet dieses bild dann.
wenn ich nun die texte durch meine bilder ersetze und verschieben will, verschwinden die bilder beim loslassen im zielfeld ebenfalls und das zielfeld ist einfach leer.

ich kriegs einfach nicht hin und hoffe es hat hier jemand einen vorschlag.

viele dank und viele gruesse

campi

[nimble]

Hi

Leider finde ich auf der Seite die Sourcen nicht, wäre aber praktisch...
Als alternative kann ich dir dies hier vorschlagen: Drop with jQuery

THX

[campi]

Hi

Leider finde ich auf der Seite die Sourcen nicht, wäre aber praktisch...
Als alternative kann ich dir dies hier vorschlagen: Drop with jQuery

THX

danke fuer den link, das schau ich mir direkt mal an :-)

das war auch mein problem mit dem code. hab mir den code seiner demoseite einfach anzeigen lassen, da steht er im header.

viele gruesse

campi

[campi]

Hi

Leider finde ich auf der Seite die Sourcen nicht, wäre aber praktisch...
Als alternative kann ich dir dies hier vorschlagen: Drop with jQuery

THX

der link ist super, genau das was ich brauchen kann. es funktioniert als separates html auch super mit meinen bildern, so wie ich es mir vorgestellt habe.

allerdings funktioniert es nicht mehr, wenn ich es in meine seite einbinden will. das aufnehmen eines bildes funktioniert, das ablegen aber nicht. wenn ich das bild ueber das zieldiv schiebe, leuchtet dieses nicht mehr auf und wenn ich das bild loslasse geht es zum ursprung zurueck. ich glaub das js kollidiert irgendwie mit anderen verwendeten scripten. wenn ich 3 davon rausnehme, funktioniert es wieder. vielleicht hat irgendjemand eine idee???soll ich evtl die drei scripte hochladen?

hier das script des drag and drop:

	$(function(){  
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  
	$(".drag")  
		.bind( "dragstart", function( event ){  
			// ref the "dragged" element, make a copy  
			var $drag = $( this ), $proxy = $drag.clone();  
			// modify the "dragged" source element  
			$drag.addClass("outline");  
			// insert and return the "proxy" element		  
			return $proxy.appendTo( document.body ).addClass("ghost");  
			})  
		.bind( "drag", function( event ){  
			// update the "proxy" element position  
			$( event.dragProxy ).css({  
				left: event.offsetX,  
				top: event.offsetY  
				});  
			})  
		.bind( "dragend", function( event ){  
			// remove the "proxy" element  
			$( event.dragProxy ).fadeOut( "normal", function(){  
				$( this ).remove();  
				});  
			// if there is no drop AND the target was previously dropped  
			if ( !event.dropTarget && $(this).parent().is(".drop") ){  
				// output details of the action  
				$('#log').append('<div>Removed <b>'+ this.title +'</b> from <b>'+ this.parentNode.title +'</b></div>');  
				// put it in it's original <div>  
				$('#nodrop').append( this );  
				}  
			// restore to a normal state  
			$( this ).removeClass("outline");	  
			  
			});  
	$('.drop')  
		.bind( "dropstart", function( event ){  
			// don't drop in itself  
			if ( this == event.dragTarget.parentNode ) return false;  
			// activate the "drop" target element  
			$( this ).addClass("ablegen");  
			})  
		.bind( "drop", function( event ){  
			// if there was a drop, move some data...  
			$( this ).append( event.dragTarget );  
			// output details of the action...  
				  
			})  
		.bind( "dropend", function( event ){  
			// deactivate the "drop" target element  
			$( this ).removeClass("ablegen");  
			});  
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  
	});  
</script>