✔ Imagedraggable is not a function.....Warum?

B

brizzi

Erfahrenes Mitglied
Hallo liebe Community,

ich habe das problem mit der draggable Funktion.

Das probelm liegt daran das in Firebug immer die Fehlermeldung $(...).imagedrag is not a function. Oder wenn cih den Jquery anders hinsetzte i.draggable is not a function.


Hab Ihr eine Idee woran es liegen könnte oder eine lösung. Ich weiß echt nicht weiter.

Das was ich eig. erreichen möchte ist, dass man ein Bild welches in einem DIV ist nur hoch und runter bewegen kann und die jeweilige Position in der DB speichern kann.


Bis vor kurzem hat auch alles funktioniert, bis ich die Funktion auf ein neues Design gesetzt habe.

den JS Code und den PHP werde ich natürlich auch zeigen.

Javascript: 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="script/jquery.imagedrag.min.js"></script>
    <script type="text/javascript">
      $(function(){

        $('#absolutes_bild').imagedrag({
          input: "#output",
          position: "<? $pos = "SELECT * FROM Bilder WHERE User='$_username' ";
                        $position = mysql_query($pos);
                        $r=mysql_fetch_object($position);
                        echo $r->x1; ?>",
          attribute: "html"
        });
      });
    </script>
    <style type="text/css">
#absolutes_bild {
        overflow: hidden;
        margin: auto;
        cursor: -webkit-grab;

      }
      </style>

PHP: 
    <div id="beweg_dich"  >
       <div id="absolutes_bild" style="margin-top:-33px; margin-bottom:-20px; overflow:hidden; ">
       <img style="width:100%; height:auto; margin-bottom:-10px;" src="'.$row['titelbild'].'" >      
      </div>
      </div>
      <form method="post" id="jobild">
        <span type="text" style="visibility:hidden" id="output"></span><br/>
         <input type="Submit" id="titelbe" value="Änderung Speichern" style="margin-left: -199px; margin-top: 23%; position:absolute;">
        </form>'
        ;} ?>

ach ja ich weiß das der code veraltet ist, kam noch nicht dazu die mysql scripte zu erneuern

danke schon mal im Vorraus.

mfg
Brizzi
 
Zum Vergleich der Quellcode der Arbeitsvorlage http://puneetk.com/jq-image-drag/
HTML: 
<!-- add jQuery & UI -->
<script type="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<!-- add JQ Image Drag plugin -->
<script type="http://puneetk.com/jq-image-drag/script/jquery.imagedrag.min.js"></script>
Das erstgenannte Script fehlt hier in deinem gezeigten Codesnippet.
 
Zuletzt bearbeitet:
ja das stimmt, dass ist das beispiel woher ich es auch habe, nur leider habe ich den code auch ersten jquery script auch bei mir schon rein getan, weil mir es auch aufefallen ist, nur hat leider auch nichts gebracht. :/

kann das an den divs liegen, oder an ajax scripte die ich in meinem Code insegsamt habe? Das die anderen Jquery die manchmal älter sind oder neuer das i-wie verhindert?
 
guck mal das ist mein ganzer Code wo die funktion eingebuden ist. Ach nur so neben bei, diese seite wird ebenfalls in eine andere seite per Ajax eingebunden.


Code: 
<?
session_start();
$_username=$_SESSION['User'];
?>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#jobild").submit(function() { 
    var left= document.getElementById('output').innerHTML;
            $.ajax({
                type:"POST",
                url:"position_speichern.php",
                data: "left="+ left,
                success: function(data)
                {
                $("#inneres_titelbild").html(data);
                }
            });
        return false;
    });
});
</script>
<?
require("config.inc.php");

$sql = "SELECT titelbild,x1 FROM Bilder WHERE User='$_username' ";
$ergebnis = mysql_query($sql);
            $row = mysql_fetch_object($ergebnis);
           
     
             if (!isset($_GET['aendern'])){
       echo'
      
       <div id="beweg_dich" >
       <div id="absolutes_bild_not" style="margin-top:0px; ">
      <img style="width:100%; height:auto; margin-top:'.$row->x1.';" src="'.$row->titelbild.'" >     
      </div>
      </div>       
       <form  method="post" action="ajax_titel.txt">
     
      <input type="Submit" id="titelbe" value="Titelbild bearbeiten" data-fancybox-group="button" class="fancybox fancybox.ajax" href="ajax_titel.txt" style="margin-top:200px; margin-left: -215px; position:absolute;"></form>
            
       ';
       }else{
    echo'
    <form method="post" id="jobild">
        <span style="visibility:hidden" id="output"></span><br/>
         <input type="Submit" id="titelbe" value="Änderung Speichern" style="margin-left: 270px; margin-top: 201px; position: absolute; z-index: 1;">
        </form>
        <div id="beweg_dich"  >
       <div id="absolutes_bild" style="margin-top:-33px; margin-bottom:-20px; overflow:hidden; ">
       <img style="width:100%; height:auto; margin-bottom:-10px;" src="'.$row->titelbild.'" >      
      </div>
      </div>
     '
        ;}
?>
       
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="script/jquery.imagedrag.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#absolutes_bild').imagedrag({
          input: "#output",
          position: "<? $pos = "SELECT * FROM Bilder WHERE User='$_username' ";
                        $position = mysql_query($pos);
                        $r=mysql_fetch_object($position);
                        echo $r->x1; ?>",
          attribute: "html"
        });
     });
    </script>
   
<style type="text/css">
#absolutes_bild {
        overflow: hidden;
        margin: auto;
        cursor: -webkit-grab;
        cursor:move;

      }
</style>
 
brizzi hat gesagt.:
nur leider habe ich den code auch ersten jquery script auch bei mir schon rein getan, weil mir es auch aufefallen ist, nur hat leider auch nichts gebracht. :/
Zum Vergrößern anklicken....
auch = aus ?

Hast du mal in Erwägung gezogen, dass jquery-1.7.2.js inkompatibel ist, wo doch der Autor die jQuery-Version 1.8.2 nutzt, und hast du das auch schon überprüft?
 
Ja das habe ich auch schon ausprobiert, nur dazu muss ich sagen, dass auf der hauptseite ebenfalls eventuell ältere Jquery script eingebunden sein können.

Sollte ich auch überprüfen oder?
 
Mhh habe das jetzt auch mal überprüft, die älteren jquerys raus genommen und ebenfalls nichts passiert.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück