kostenloser Webspace werbefrei: lima-city

Drag&Drop

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   raubritta

   

   raubritta hat kostenlosen Webspace.

   15:00, 18.8.2008

   Hallo. Ich habe wie schon in vielen Posts berichtet einen auftrag für ein größeres Projekt.
   
   Nun, gäbe es nicht die wunderbare Sprache Ajax wäre das Projekt schon fertig. Doch in der neuen Version hatte ich mir vorgenommen diese Sprache mit aufzunehmen und so nicht auf Drag & Drop zu verzichten.
   Nichts schwerer als das hab ich mir am Anfang gedacht. Doch ich konnte nichts besseres finden als: http://www.martinprzybyla.com/how-to-build-a-drag-and-drop-shopping-cart-with-jquery/ und ähnliche Programme, wie das verschieben... oder verändern der Größe.
   
   Was ich aber haben möchte wäre:
   eine Tabelle, deren Inhalt (Namen) aus der Datenbank ausgelesen wird.
   in der man Die Namen verschieben kann, sodass danach die Namen neu gespeichert werden...
   
   hat jemand ein Skript parat, dass soetwas erfüllt? Selbst Google ist sprachlos wegen diesem zugegebenermaßen schwierigen Skript.
   
   Sollte jemand etwas haben, jedoch Geld dafür verlangen. Sehr kleine beträge könnte ich bezahlen. Aber wirklich nur, wenn alles selber geschrieben wurde.
   
   
   Danke im Vorraus. Die Möglichkeit zum Speichern ist das wichtige und das wird bei Frameworks glaube ich leider schwierig...
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. e********l

   16:05, 18.8.2008

   Ich kann dir dafür scriptaculous empfehlen. Einfache API und hübsche Effekte mit erzielbar.
   http://script.aculo.us/
   
   Damit kann man die gewünschten Anforderungen erreichen.

4. ryanblack

   

   ryanblack hat kostenlosen Webspace.

   16:56, 18.8.2008

   
   eine Tabelle, deren Inhalt (Namen) aus der Datenbank ausgelesen wird.

   
   Das kannst du auch mit PHP machen.
   
   

   
   in der man Die Namen verschieben kann, …

   
   In [Mootools] gibt es dafür eine eigene Klasse: [Sortables](http://docs.mootools.net/Plugins/Sortables)
   
   

   … sodass danach die Namen neu gespeichert werden...

   
   Du musst halt jedes Mal, wenn das Event `complete` von `Sortables` eingetreten ist, das ganze Formular per AJAX abschicken.
   
   Ryan
   
   [Mootools]: http://www.mootools.net/
   
5. Autor dieses Themas

   raubritta

   

   raubritta hat kostenlosen Webspace.

   18:56, 18.8.2008

   mhm, jetzt wurden alle mir bekannten Frameworks genannt.
   
   Mir bleibt also keine andere möglichkeit übrig, als es selber anzupassen. Ich habe mich für jQuery entschieden. Das scheint das am passendste zu sein.
   
   Vielleicht helft ihr mir auch hier weiter:
   
   

   <style type="text/css"> 
   .Arbeiter 
   { 
   	width: 64px; height: 20px; border: 
       1px solid #000000; background-color: #DDD; 
   } 
   #krank
   {
   	width: 200px; height: 20px; border: 1px solid #000;
   }
   #urlaub
   {
   	width: 200px; height: 20px; border: 1px solid #000;
   }
   #sonstiges
   {
   	width: 200px; height: 20px; border: 1px solid #000;
   }
   </style> 
   <script language="javascript" type="text/javascript" src="javascript/jquery.js"></script>
   <script language="javascript" type="text/javascript" src="javascript/ui.core.js"></script>
   <script language="javascript" type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
   <script language="javascript" type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.droppable.js"></script>
   <script language="javascript" type="text/javascript">
   $(document).ready(function() 
   {
   	$('.Arbeiter').draggable(
   	{ 
   		'revert': true 
    	});
   	$('#krank').droppable(
   	{ 
   		accept: '.Arbeiter', 
   		drop: function() 
   		{ 
                          //hier muss das passende hin
   
   		} 
   	});  
   	$('#urlaub').droppable(
   	{ 
   		accept: '.Arbeiter', 
   		drop: function() 
   		{ 
                          //hier muss das Passende hin
   
   		} 
   	});  
   	$('#sonstiges').droppable(
   	{ 
   		accept: '.Arbeiter', 
   		drop: function() 
   		{ 
   			drop: 
                                 //hier muss das passende hin
   		} 
   	});  
   
   });
    
   </script>
   
   <div id="krank"> 
   <div class="Arbeiter">
   <center>Büttner</center>
   </div>
   <div class="Arbeiter">
   <center>Steltmann</center>
   </div>  
   <i></i>
   </div>
   <div id="urlaub"> 
   </div> 
   <div id="sonstiges"> 
   </div>

   
   
   Das ist mein bisheriger code. Soweit schon recht schön. Aber ich habe keine Idee, wie ich jetzt den entsprechenden Namen in ein anderes div fallen lasse und es sich dann anordnet.
   
   Meine Idee:
   das alte löschen und ein neues hinmachen -> Das alte geht durch das revert:true immer wieder zurück.
   Das alte dort einklicken lassen -> Ich bekomme das einklicken leider nicht richtig hin.
   
   Hat jemand Hilfestellungen, funktionen o.ä.?

6. e********l

   23:05, 18.8.2008

   scriptaculous hat doch ein fertiges beispiel für dein Problem bei der Distribution dabei. Hast du dir das schonmal angeschaut? Ist ganz einfach zu verwenden. <15 Min Einarbeitungszeit.

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?