nachladen und drag & drop

  • nachladen und drag & drop

    hallo zusammen,

    ich habe folgendes problem:
    1. per ajax soll eine liste nachgeladen werden
    2. die liste soll sortierbar sein

    so bei dem quelltext funktioniert 1., aber 2. nicht.
    unten habe ich den quelltext meiner index.tml und der insert.php angegeben, damit koennt ihr mein problem bestimmt besser nach voll ziehen. danke schon mal fuer eure muehe! :D

    datei index.html:

    Quellcode

    1. <html><head><title></title>
    2. <style>
    3. #content #examplelist {
    4. list-style-type:none;
    5. margin:0;
    6. padding:0;
    7. }
    8. #content #examplelist li {
    9. width:200px;
    10. font:13px Verdana;
    11. margin:0;
    12. margin-left:20px;
    13. padding-left:20px;
    14. padding:4px;
    15. cursor:move;
    16. }
    17. div.dropmarker {
    18. height:6px;
    19. width:200px;
    20. background: url(dropmarker.png) left top;
    21. margin-top:-3px;
    22. margin-left:-5px;
    23. z-index:1000;
    24. overflow: hidden;
    25. }
    26. </style>
    27. <script src="prototype.js" type="text/javascript"></script>
    28. <script src="scriptaculous.js" type="text/javascript"></script>
    29. <script type="text/javascript">
    30. <!--
    31. var please_wait = null;
    33. function open_url(url, target) {
    34. if ( ! document.getElementById) {
    35. return false;
    36. }
    38. if (please_wait != null) {
    39. document.getElementById(target).innerHTML = please_wait;
    40. }
    42. if (window.XMLHttpRequest) { // Mozilla, Safari,...
    43. link = new XMLHttpRequest();
    44. if (link.overrideMimeType) {
    45. link.overrideMimeType('text/xml');
    46. // zu dieser Zeile siehe weiter unten
    47. }
    48. }
    49. else if (window.ActiveXObject) { // IE
    50. try {
    51. link = new ActiveXObject("Msxml2.XMLHTTP");
    52. }
    53. catch (e) {
    54. try {
    55. link = new ActiveXObject("Microsoft.XMLHTTP");
    56. }
    57. catch (e) {}
    58. }
    59. }
    61. if (link == undefined) {
    62. return false;
    63. }
    65. link.onreadystatechange = function() { response(target); };
    66. link.open("GET", url, true);
    67. link.send(null);
    68. }
    70. function response(target) {
    71. if (link.readyState == 4) {
    72. if (link.status == 200) {
    73. document.getElementById(target).innerHTML = link.responseText;
    74. }
    75. else {
    76. alert('Bei dem Request ist ein Problem aufgetreten.');
    77. }
    78. }
    79. }
    81. function set_loading_message(msg) {
    82. please_wait = msg;
    83. }
    85. set_loading_message("kommt sofort ...");
    87. //-->
    88. </script>
    90. </head><body>
    92. <a href="#" onClick="open_url('insert.php','liste')">Liste mit ajax nachladen</a>
    94. <div id="liste">
    95. <ul id="examplelist">
    96. <li>hans</li>
    97. <li>achim</li>
    98. <li>berta</li>
    99. <li>lisa</li>
    100. <li>tom</li>
    101. </ul>
    102. </div>
    104. <script type="text/javascript" language="javascript">
    105. Sortable.create('examplelist',{ghosting:true,constraint:false})
    106. </script>
    108. </body></html>
    Alles anzeigen


    datei insert.php:

    Quellcode

    1. <?php
    2. echo "
    3. <ul id=\"examplelist\">
    4. <li>Lorem ipsum dolor</li>
    5. <li>sit amet</li>
    6. <li>consectetur adipisicing</li>
    7. <li>elit</li>
    8. <li>sed do eiusmod</li>
    9. <li>tempor incididunt</li>
    10. <li>ut labore et dolore</li>
    11. <li>magna aliqua</li>
    12. </ul>
    13. ";
    14. ?>
    Alles anzeigen

  • joo, vielen dank fuer den hinweis.

    sorry :oops:, aber ich frage jetzt noch bischen weiter, wollte gerne die liste vom user sortieren lassen, per "drag and drop". soll eine wunschliste werden, also jeweiter oben desdo wichtiger. und um das ganze komfortabel zu gestallten find ich ajax (drag and drop) sehr gut. ander variante mit knopf hinter dem artikel, hab ich schon in der aktuellen version.

    also wie geht das denn mit DOM?

  • naja.. dann würde ich es doch nicht serverseitig machen
    Ich dachte es ging um die Sortierung einer Kategorie oder Ähnlichem.

    Dann genügt es ja mit JavaScript (also ohne ajax) zu sortieren und dann nur noch per AJAX zu speichern

    Hast du dein Sortable Objekt denn schon fertig?
    Ansonsten ist das hier eine schöne Komplettlösung:
    http://demo.script.aculo.us/ajax/sortable_elements

  • hallo vielen danke! die loesung ist echt nett aber leider keine für meinen fall. das problem ist lediglich, das anzeigen einer liste mit ajax die dann aber drag and drop faehig ist.

    was soll passieren:
    - man geht auf die seite
    - dort gibt es beliebig viele listen zur auswahl (nur die ueberschrift - also ein register oder inhaltsverzeichnis)
    - davon waehlt man eine liste aus (per link)
    - mit ajax wird nun, in einem speziellen div - "bereich", die ganze liste angezeigt (das fukst ja schon oben im skript)
    - diese liste soll aber jetzt drag and drop faehig sein (das funktioniert oben im skript nicht :( ) ! genau hier liegt also meine problem !

    will wirklich nicht das forum mit unnoetigen zeug füllen, aber ich muss das eben so umsetzen und bis jetzt hab ich keine ahnung wie ich weiter vorgehen sollte.

  • Vergiss meinen letzten Beitrag. Ich habe mir deinen Code eben erst intensiver angeschaut und mir ist aufgefallen, dass du scriptaculous bereits nutzt.

    Du rufst die scriptaculous Funktion aber nur nur beim Laden der Seite auf.
    Dabei musst du diese immer aufrufen, wenn du eine neue Liste lädst

    folgenden code habe ich getestet:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    4. <head>
    5. <title>script.aculo.us sortable functional test file</title>
    6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    7. <script src="../../lib/prototype.js" type="text/javascript"></script>
    8. <script src="../../src/scriptaculous.js" type="text/javascript"></script>
    9. <script type="text/javascript">
    10. <!--
    11. function ajax() {
    12. try {
    13. req = window.XMLHttpRequest?new XMLHttpRequest():
    14. new ActiveXObject("Microsoft.XMLHTTP");
    15. } catch (e) {
    16. //Kein AJAX Support
    17. }
    19. req.onreadystatechange = function() {
    20. if ((req.readyState == 4) && (req.status == 200)) {
    21. document.getElementById('inhalt').innerHTML = req.responseText;
    23. Sortable.create('examplelist', {onUpdate:function(){ new Ajax.Updater('list-info', '/ajax/order', {
    24. onComplete:function(request){new Effect.Highlight('list',{});},
    25. parameters:Sortable.serialize('list'),
    26. evalScripts:true, asynchronous:true})}})
    27. }
    28. };
    29. req.open('GET', 'insert.php');
    30. req.send(null);
    31. }
    32. //-->
    33. </script>
    34. </head>
    35. <body onload="ajax()">
    36. <div id="inhalt">
    37. </div>
    38. </body>
    39. </html>
    Alles anzeigen