Bilderssortierung und Verschiebung @ tutorials.de: Tutorials, Forum & Hilfe

timmeyy · 03.07.09 13:59

Hi Leute!
ich hab nur begrenzte Kenntnisse mit JS und AJAX, eigentlich nur theoretisch.
Ich würde gerne sowas mit Bilder umsetzen und zwar sollen links die Bilder aus einem Bilderpool angezeigt werden und rechts soll ein beliebiger Ordner dargestellt sein in den ich meine Bilder schieben und sortieren kann.
so etwas nur mit bilder:http://www.dhtmlgoodies.com/scripts/...ag-drop-1.html

Jetzt ist meine Frage:
Also ich hole mir mit php die Bilder aus der Datenbank bzw vom Webserver, das hab ich schon hinbekommen, ich kann sie auch sortieren, aber wie kann ich es umsetzen das die Bilder von den einen Ordner in den anderen Ordner kommen?
Ich habs mir so übelegt, dass ich die Bilder erst rüberziehe und dann mit einem Butto speichere?
Hat da jemand ein Script oder ne Idee wie das geht?
Wichtig ist es ist kein UPLOAD!

mfg tim

Sven Mintel · 04.07.09 02:02

Moin Tim,

so kompliziert ist das garnicht, es gibt da eine Reihe von JS-Bibliotheken, die dir da viel Arbeit abnehmen.

Ich gehe mal nur auf den JS-Part ein, das kopieren/verschieben bekommst du ja, soweit ich dich verstanden habe, selbst mit PHP hin, sofern du die nötigen Daten hast

Hier mal ein Beispiel(ist so lauffähig, anstatt der Avatare aus dem Forum nimmst du halt deine eigenen Bilder):

Code :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-07-03" />
<title>Test</title>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>
<script type="text/javascript" src="http://www.json.org/json2.js"></script>
<style type="text/css">
<!--
#sortable{empty-cells:show}
#sortable td{vertical-align:top}
#sortable tbody td img{display:block}
-->
</style>
</head>
<body>
<table id="sortable" width="300" border="1">
<colgroup width="50%" span="2"></colgroup>
  <thead>
    <tr>
      <th>Pool</th>
      <th>ZielOrdner</th>
    </tr>
  </thead>
   <tfoot>
    <tr>
      <th colspan="2"><input type="button" value="speichern" onclick="fx('fx.php',$('#target'),'pfad/zum/zielordner/')"></th>
    </tr>
  </tfoot> 
  <tbody>
    <tr>
      <td>
        <img src="http://www.tutorials.de/forum/customavatars/avatar23393_2.gif">
        <img src="http://www.tutorials.de/forum/customavatars/avatar31374_2.gif">
        <img src="http://www.tutorials.de/forum/customavatars/avatar59490_2.gif">
      </td>
      <td id="target"></td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
<!--
$("#sortable tbody td").sortable({
  connectWith: '#sortable tbody td'
  }).disableSelection();
 
 
function fx(url, obj,target)
{
  var json=JSON.stringify({'zielordner':target,
                           'bilder':
                  obj.find('img').map
                      (
                       function()
                        {
                          return $(this).attr('src');
                        }
                      ).get()});
if(json.length)
  {
    $.post(url, 
          'data='+escape(json),
          function(data)
            {
              alert(data); 
            });
  }
}
//-->
</script>
</body>
</html>

Das ganze nutzt das JQuery-Framework, das kann fast alles, was es dafür braucht.(Daher werden auch 2 Skripte von jQuery eingebunden im <head>)

HTML-seitig ist im Beispiel folgendes wichtig für die korrekte Funktion:
Da ist eine Tabelle, deren ID ist "sortable".

In dieser Tabelle ist genau 1 <tbody>...und darin 2 <td>...diese Können sortiert werden. Die <td>, in welche die Bilder geschoben werden sollen, hat die ID "target".

Das wars von der Seite aus, der Rest läuft so ab:

Code :

1
2
3

$("#sortable tbody td").sortable({
  connectWith: '#sortable tbody td'
  }).disableSelection();

....die beiden <td> im <tbody> werden damit sortierbar gemacht.

Da ist ein Button, bei dessen onclick eine Funktion fx() aufgerufen wird:

Code :

1	fx('fx.php',$('#target'),'pfad/zum/zielordner/')

Dieser Aufruf gibt der Funktion 3 Parameter mit:
1. die Adresse eines PHP-Skriptes, später mehr dazu
2. Die <td>, wohin die Bilder geschoben werden(in dem Fall als jquery-Selektor)
3. Der Zielordner, wo das PHP-Skript die Bilder später hinschubsen soll

Die Funktion fx:

Code :

var json=JSON.stringify({'zielordner':target,
                           'bilder':
                  obj.find('img').map
                      (
                       function()
                        {
                          return $(this).attr('src');
                        }
                      ).get()});

Es wird ein Objekt mit 2 Eigenschaften erstellt:
zielordner: was du der Funktion übergeben hast
bilder: ein Array mit den Pfaden aller in die target-Zelle geschobenen Bilder.

Dieses Objekt wird zu einem JSON-String kodiert....das kann man so gut versenden und mit PHP wieder dekodieren.(Daher wurde im <head> auch ein Skript eingebunden, welches dies Objekt kodieren kann...json2.js)

Code :

if(json.length)
  {
    $.post(url, 
          'data='+escape(json),
          function(data)
            {
              alert(data); 
            });
  }

Das ganze wird per AJAX an das PHP-Skript gesendet, welches die Daten verarbeiten kann, hier mal ein Beispiel für fx.php:

PHP-Code:


<?php

  if(isset($_POST['data']))

  {

     $data=json_decode((get_magic_quotes_gpc())

                        ? stripslashes($_POST['data'])

                        : $_POST['data']

                       );

     if(is_array($data->bilder) && count($data->bilder))

     {

        echo 'Folgende Bilder können jetzt per PHP nach '.

              $data->zielordner." verschoben werden:\n\n";

        foreach($data->bilder as $bild)

        {

          echo parse_url($bild, PHP_URL_PATH )."\n";



        }

     }

     else

     {

      echo "nix zum verschieben";

     }

     

  }

  else

  {

    echo 'keine Daten';

  }

?>

Da müsstest dann halt das verschieben(kopieren) der Bilder umsetzen, die nötigen Daten hast du ja verfügbar.

Habs mal hochgeladen zum Testen:
http://doktormolle.de/temp/343224/

timmeyy · 08.07.09 20:28

Hi Leute!
ich wollte folgendes Skript verwenden:
http://www.webresourcesdepot.com/dyn...query-and-php/

Mein Problem ist das ich anstatt

Code :

1	<li id="recordsArray_<?php echo $row['recordID']; ?>"> </li>

Bilder aus einem Verzeichnis und aus der DB sortieren möchte.
Hat jemand ne Idee wie das geht?

Ich danke euch schonmal

mfg tim

Maik · 08.07.09 20:42

Hi,

so wie ich das in dem Beispiel entnehme, müssen lediglich anstelle der Textpassagen die Bilder in die Liste eingepflegt werden.

mfg Maik

timmeyy · 08.07.09 20:54

Also ich bin fast sprachlos, das ist genau das was ich brauche sogar mit meinem geliebten und bevorzugtem jquery vielen dank!
super danke dir!!

gruß tim

Maik · 08.07.09 20:57

Und das nächste Mal vermeide bitte solch Doppelposts im Forum, die ich hier dann mal zusammentackere - vielen Dank!

Zitat von Netiquette #12

Bitte erstelle keine Doppel-/Mehrfach-/Pushpostings. Dazu zählen insbesondere das Erstellen identischer Themen in mehreren unterschiedlichen Unterforen, das mehrfache oder erneute Einstellen eines bereits vorhandenen Themas, und das Posten von Beiträgen, die einzig und allein dem Zweck dienen, das entsprechende Thema in der Themenauflistung wieder weiter oben zu platzieren (sog. „Thread Pushing“). Derartige Beiträge werden restlos gelöscht. Sollte der Eindruck bei unseren Moderatoren entstehen, dass wissentlich gegen diesen Punkt verstoßen wurde, hat dies die unbegrenzte Sperrung des Accounts zur Folge.

Quelle: http://www.tutorials.de/netiquette.html

mfg Maik

timmeyy · 08.07.09 21:31

hi!
ja sry, ich hatte den anderen thread ganz vergessen...

mogmog · 15.09.09 13:26

Hy,

ich habe mal eine Frage zu dem Beitrag. ich habe eine Idee für meine Bildergalerie nur es einfach per php funktioniert nur finde ich die Idee mit dem Drag & Drop sehr sehr gut.

Nun zu meiner Idee.
Ich habe eine Tabelle mit Ordnern von dem brauche ich die ID und einmal eine Tabelle mit den Bildern von denen brauche ich auch nur die ID.
d.h. wie kann ich die Bilder so per Drag & Drop sortieren und wenn dies gespeichert wird soll ein solcher String gesendet werden (bild id) "1,2,3,4,5,9".

mogmog · 15.09.09 22:20

Hallo und guten abend,

Ich habe dieses Script nutzen wollen und etwas angepasst habe auch soweit das hin bekommen wie ich es wollte bis auf ein paar kleinlichkeiten.

1. ich weiß nicht wie ich hier einen kleinen helper einbauen kann d.h. es soll ein kleines Kästchen sein das einfach nur eine gestrichelte Linie hat.
2. das Bild was sich angeklickt ist (draged) soll leicht durchsichtig sein.

die beiden Sachen sind mit CSS recht einfach umsetzbar wenn ich da eine klasse oder id habe nur wie kann ich mir in diesem die holen bzw. erstellen.

hier mal meine Modifizierung:

HTML-Code:

<div id="sortable">

<div id=="pool" style="min-height:100px; width:19%; border:1px dashed #cecece; float:left;">
Trasch:<br />
<img id="3" src="js/avatar23393_2.gif">
</div>
<div id="target" style="width:80%; border:1px dashed #cecece; float:left;">
Bilder:<br />
	<img id="1" src="js/avatar59490_2.gif">
	<img id="2" src="js/avatar31374_2.gif">
</div>

</div>
<div id="ausgabe">
<input type="button" value="speichern" onClick="fx('fx.php',$('#target'))">
</div>

<script type="text/javascript">

<!--
$("#sortable div").sortable({
  connectWith: '#sortable div'
  }).disableSelection();

function fx(url, obj,target)
{
  var json=JSON.stringify({ 'bilder':
				  obj.find('img').map
					  (
					   function()
						{
						  return $(this).attr('id');
						}
					  ).get()});

if(json.length)
	{
	$.post(url, 'data='+escape(json),
		function(data)
			{ alert(data); });
	}
}
//-->
</script>

mogmog · 15.09.09 23:57

also zum 1. punkt das habe ich herausgefunden wie es funtkioniert.

man muss nur:

HTML-Code:

placeholder: 'hepler',

einfügen und schon hat man eine Klasse die man editieren kann. nur zu 2. einer kleinen gost Funktion habe ich noch nichts finden können.

ich würde mich über eine Antwort sehr freuen.

***einfach nur crack*** · 16.09.09 00:29

Unter Resizable findet man die Eigenschaft ghost, welche man dort einfach auf true setzen muss. Vielleicht funktioniert das auch in diesem Fall.

mogmog · 16.09.09 00:36

das habe ich schon versucht funktioniert leider nicht.

ich habe aber ein anderes Problem gerade festgestellt unter dem IE und opera funktioniert das drag & drop leider nicht.

woran kann das liegen?

//-------------------------------------------------------------------------------------------

Fehler gefunden das war nur ein Schussel Fehler meiner seits =)

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Css Layout verschiebung

Verschiebung

verschiebung im IE

Verschiebung in JTable

Grafik verschiebung

Stichworte

E-Mail:

Abonnieren Abbestellen