Draggable Element aktualisieren

BartTotal · 13. Januar 2016

Hallo

Ich hab mir einen Script zusammen gestellt. Welcher mir erlaubt Sticker auf einer Pinnwand zu platzieren und abzuspeichern (Db). Nun habe ich ein Inventar Erweitert, und möchte nun Sticker aus dem Inventar auf die Pinnwandplatzieren ohne die komplette Seite neu zu laden.

Leider komme ich nicht von selbst drauf. Selbst mit einem Reload des draggable Fensters platziert es mir alle Sticker wieder auf die vorher gespeicherte position.

Habt ihre eine Idee wie man das alle Lösen kann?

SpiceLab · 13. Januar 2016

Redest Du von Java (= Wahl des Forums), oder nicht eher von JavaScript?

Wie auch immer, Dein aktueller Code wäre schon von Interesse, um konkret darauf antworten zu können

BartTotal · 13. Januar 2016

Entschuldigung.

Ich versuche gerade Daten aus einer PHP Schleife in die Datenbank zu speichern.
Soweit funktioniert es sofern es nur 1 Zeile aus der Datenbank ist.
Sobald es 2 Zeilen speichern soll, speichert es nur eine ab.

Das Ziel ist es mit Onclick alle Sticker Positionen mit Jquery zu speichern ohne die Seite neuzuladen.

Javascript:

function $row->name(id,u_id,tops,linkss,zs){
$.ajax({
  type: 'POST',
  url: 'sticker_inventar.php',
  data: { c_id: id, top: $(\"#".$row->name."Y\").val(), links: $(\"#".$row->name."X\").val(), z: $(\"#".$row->name."Z\").val()},
  async: false,
  success: function(data) {
  $('#'+id).html(data);
  setTimeout(function() {
        $('#'+id).fadeIn(300);
        
     }, 5);
    $('#'+id).hide();
  }
});
}

BartTotal · 14. Januar 2016

PHP:

    $langquery="SELECT * FROM iv_profil_element WHERE `userid`='BartTotal'";
    $langresult=mysql_query($langquery);

    if( mysql_num_rows($langresult) <= 0 ){
        $badgess = 'Du hast keine Sticker';
    } else {
        while( $rowBadges = mysql_fetch_assoc($langresult) ){
        $counter++;
             $badges[$counter] = '
             <style type="text/css">
                #'.$rowBadges[name].' {
                position:absolute;
                top: '.$rowBadges[top].'px;
                left: '.$rowBadges[links].'px;
                z-index: '.$rowBadges[z].';
                cursor: move;
                }
            </style>
          
        
            <script type="text/javascript">
            var z = parseInt( $("#'.$rowBadges[name].'").css( "z-index" ), 1 );
          
            $(function(){
            var coordinates = function(element) {
                element = $(element);
                var top = element.position().top;
                var left = element.position().left;
                $("#'.$rowBadges[name].'X").val("" + left );
                $("#'.$rowBadges[name].'Y").val("" + top );
                $("#'.$rowBadges[name].'Z").val("" + a );
                $('.$rowBadges[name].').css("z-index", a++);
            }
           
            $("#'.$rowBadges[name].'").draggable({
            containment: "#window",
          
            start: function() {
              var a = 1;
              coordinates("#'.$rowBadges[name].'");
              $('.$rowBadges[name].').css("z-index", a++);
            },
          
            stop: function() {
              coordinates("#'.$rowBadges[name].'");
              $('.$row->name.').css("z-index", a++);
               }
            });
            });    
           
            function '.$rowBadges[name].'(id,u_id,tops,linkss,zs){
             $.ajax({
              type: "POST",
              url: "sticker_inventar.php",
              data: { c_id: id, top: $("#'.$rowBadges[name].'top").val(), links: $("#'.$rowBadges[name].'links").val(), z: $("#'.$rowBadges[name].'z").val()},
              async: false,
                success: function(data) {
              $(p).html(data);
              setTimeout(function() {
                    $(p).fadeIn(300);
                   
                 }, 5);
                $(p).hide();
              }
             });
            }
          
            </script>

            <div id="'.$rowBadges[name].'">
                 <img src="'.$rowBadges[url].'">
                 X:<input  name="'.$rowBadges[name].'links" id="'.$rowBadges[name].'X"><br>
                Y:<input name="'.$rowBadges[name].'top" id="'.$rowBadges[name].'Y"><br>
                Z:<input  name="'.$rowBadges[name].'z" id="'.$rowBadges[name].'Z"><br>
             </div>
             ';
        }
        //var_dump($badges);
        $badgess = implode("", $badges);
    }
  
  
  
  
    echo '
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
    <div id="window">
  
    <script type="text/javascript">
    var a = 1;
    </script>';
  
  
  
    echo $badgess;
  
  
    echo '</div>';
  
    echo '<a href="javascript:" onClick="Taler() && Krokodil();">SPEICHERN</a><p></p>';

Hab mal was probiert :S ging nicht ihrendwie werden die Positionen nicht an sticker_inventar.php weitergeleitet.

Hyper Lord · 14. Januar 2016

Hallo,

erstmal eine anmerkung: in js

Javascript:

 function $row->name()
// ubd
{ c_id: id, top: $(\"#".$row->name."Y\").val(), links: $(\"#".$row->name."X\").val(), z: $(\"#".$row->name."Z\").val()}

kann nicht funktionieren!!!

du schreibst, das du nicht mehr als einen eintrag speichern kannst, so ohne dein php script zum speichern zu kennen, wuerde ich sagen -> du schreibst php in js !?

Javascript:

function rowObject(params){
        ...
        this.c_id= parseInt(params['StickerId']) || -1; // DB ID ?? Kommt dann erst beim ruckgabewert bzw. beim naechsten db select
        this.name = params['RowName'];
        ...
}
function saveStickers(id){
        var rows = {};
        $('.Stickers').each(function(i) {
                rows[i.toString()]= new rowObject({"RowName":$(this).id,"StickerId": $(this)
.attr( "data_id")} );
});
        }
        $.ajax({
                 type: 'POST',
                 url: 'sticker_inventar.php',
                 data: rows, // muesste geparst werden, bin mir jetzt aber net sicher
                 async: false,
                 success: function(data) {
                         $('#'+id).hide().html(data).fadeIn(300);
                 };
        });
}

und wenn du jetzt das ganze in deinem php mit insert... in die db schreibst, musst du auch darauf achten, das der eintrag schon vorhanden sein koennte, also entweder vorher die eintraege loeschen und neu schreiben, oder isowas in der art:

PHP:

INSERT INTO table (c_id, name) VALUES (2, 'Test');
  ON DUPLICATE KEY UPDATE name = name;

oder du filterst in php das object

PHP:

if(obj['c_id'] > -1)
$sql = 'update' ...
else
$sql = 'insert' ...

und dein php skript ist ziemlich hettig, du haust da ja eine millionen milliarden mal <style> und <script> rein wenn du eine millionen milliarden sticker hast

Hyper Lord · 14. Januar 2016

Version php:

Also ich wuerde es eher so in der art machen

so auf die schnelle

jquery 1.5???

HTML:

<?php
    $langquery="SELECT * FROM iv_profil_element WHERE `userid`='BartTotal'";
    $langresult=mysql_query($langquery); // ACHTUNG veraltet, gibt es irgendwann nicht mehr!
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<script type="text/javascript">
    var a = 1; //??????


     function rowObject(params){
        ...
        this.c_id= parseInt(params['StickerId']) || -1; // DB ID ?? Kommt dann erst beim ruckgabewert bzw. beim naechsten db select
        this.name = params['RowName'];
        ...
}
function saveStickers(id){
        var rows = {};
        $('.Stickers').each(function(i) {
                rows[i.toString()]= new rowObject({"RowName":$(this).id,"StickerId": $(this)
.attr( "data_id")} );
});
        }
        $.ajax({
                 type: 'POST',
                 url: 'sticker_inventar.php',
                 data: rows, // muesste geparst werden, bin mir jetzt aber net sicher
                 async: false,
                 success: function(data) {
                         $('#'+id).hide().html(data).fadeIn(300);
                         makeMeDrag('Stickers');
                 };
        });
}
    $('.save-stickers').on( "click", function() { saveStickers('window'); } );

    $(document).ready( function{
            var coordinates = function(element) {
                var elm = $(element);
                var top = elm .position().top;
                var left = elm .position().left;
                $(element+' X').val( left );
                $(element+' Y').val(top );
                $(element+' Z').val(a );
                elm.css("z-index", a++);
            }
     
            var makeMeDrag =  function(className) {
                $('.'+className).draggable({
                containment: "#window",
  
                start: function() {
                    a = 1;
                    coordinates(this); // weiss ich nicht ob das so funkt
                    $(this).css("z-index", a++);
                },
  
                stop: function() {
                    coordinates(this);
                    $(this).css("z-index", a++);
                }
           });
           };
           makeMeDrag('Stickers');
    });
</script>
<style> .Stickers {position:absolute; cursor: move;}</style>
<div id="window">
<?php
  if( mysql_num_rows($langresult) <= 0 ){
        echo 'Du hast keine Sticker';
    } else {
        while( $rowBadges = mysql_fetch_assoc($langresult) ){
             echo '<div id="' .$rowBadges['name'] .'" class="Stickers" data-id="'.$rowBadges['c_id'].'"
                          style="top: '.$rowBadges['top'].'px; left: '.$rowBadges['links'].'px; z-index: '.$rowBadges['z'].';">
                           <img src="' . $rowBadges['url'] .'">
                           X:<input  name="'.$rowBadges['name'].'links" id="'.$rowBadges['name'].'X"><br>
                           Y:<input name="'.$rowBadges['name'].'top" id="'.$rowBadges['name'].'Y"><br>
                           Z:<input  name="'.$rowBadges['name'].'z" id="'.$rowBadges['name'].'Z">
                       </div>';
?>
    <button class="save-stickers">SPEICHERN</button>
</div>

Bin mir net sicher ob ich dein js richtig verstanden habe...

also du produzierst redundanten code in deinem php ( vorsichtig ausgedrueckt ) usw. ...

Hyper

sheel · 14. Januar 2016

Nur eine "kleine" Anmerkung: Die mysql_irgendwas-Funktionen sind
in der aktuellen PHP-Version gar nicht mehr enthalten.

Sie werden nicht in Zukunft entfernt, sie sind schon entfernt.
(nach vielen Jahren Vorwarnung, sogar von der PHP-Engine selber)

Hyper Lord · 14. Januar 2016

ach wie die zeit verfliegt, wir haben ja schon 2016 mysql_irgendwas schon so lange her...

Hyper Lord · 14. Januar 2016

was ich noch vergessen habe: grundvoraussetzung fuer datenbankabfrage ist eine geoeffnete connection!!! sonst kannst du weder speichern noch lesen...

und mein beispiel ist nur ein Beispiel, koennen auch fehler drin sein und ist teils abgekuerzt

BartTotal · 14. Januar 2016

Was ist den 2016 so modern? Wie geht eine moderne xD abfrage?

Draggable Element aktualisieren

BartTotal

Mitglied

SpiceLab

ZENmechanic

BartTotal

Mitglied

BartTotal

Mitglied

Hyper Lord

Mitglied

Hyper Lord

Mitglied

sheel

I love Asm

Hyper Lord

Mitglied

Hyper Lord

Mitglied

BartTotal

Mitglied

Neue Beiträge