JQuery ziehbar Bild mit gespeicherten Position

Question

OK es ist umständlich immer schon gesucht und versucht, über 5 Stunden für und ich laufe nur im Kreis ...

Das Szenario ist einfach: Es ist die Header-Bild eines Benutzerprofils Es kann in eine Position gezogen werden, und dann wird die oberste Position des Bildes in einer DB gespeichert.

Dank Rote Bete-Betroots "Eindämmung: 'Eltern'" Ich bin auf dieses Stück Code, der tatsächlich reagiert, wie ich es will! Bis auf ein großes Problem. Das Bild springt einfach entweder nach oben oder nach unten. Es gibt kein reibungsloses Scrollen? Ändere ich das "Elternteil" in "Elternteil", scrollt es gut, aber ... das Containment ist natürlich nicht mehr da. Hilfe? : D

Der JS

$(function(){ 
    $(".headerimage").css('cursor','s-resize'); 
    $(".headerimage").draggable({ containment: 'parent', scroll: false, axis: "y", stop: function(event, ui) { 
      var data = "profileheaderposition="+ui.position.top; 
      var destination = "/modules/users/profile/save.php"; 
      get_data(data, destination, function(test){ 
       notice(test); 
      }); 
     } 
    });     
}); 

So und nicht zuletzt der Kopf ist so eingeschlossen:

<div class="<?php if ($user->id == $profileuser->id) echo "changer"; ?> ui-corner-all" id="profileheader" style="overflow: hidden; width: 650px; height: 260px; position:relative;"> 
<?php if($profile->profileheader){ 
    $size = getimagesize($profile->profileheader); 
?> 
<img id="" class="draggable headerimage" style="position: absolute; top: <?php echo $profile->profileheaderposition; ?>px;" src="<?php echo $profile->profileheader; ?>" alt="profileheader" width="650" /> 

Wie gesagt Stunden googeln keine Ergebnisse wurden zu geben - und wenn ich würde die Ergebnisse nicht speichern, es würde gut funktionieren, aber naja ...

- Bearbeiten -

Im Moment bin ich über -.- auszurufen Ich habe eine Prämie auf diesen einen und die Werkzeuge für die Hilfe bei ain jsfiddle eingerichtet, aber ein Gastkonto auf meiner Webseite, die ist: http://www.animize.de

Es können Sie sich einloggen auf die Seite mit dem Benutzernamen: Gast und der pw gast - Klicke oben rechts auf den Namen (gast) und du siehst das Profil - dort kannst du das headerpicture verschieben - und natürlich sollte es sich anders verhalten als es tut - Hilfe :(

Answer 1

this fiddle Versuchen.

Ich habe eine if-Anweisung an das drag Ereignis, das die aktuelle Positionierung des Bildes überprüft und setzt die aktuelle Top-Position in ui.position.top, wenn die Bedingung true zurück, so dass das ziehbar Ereignis während der Kollision nicht die Top-Position erhöhen oder verringern Grenzen des div. Auf diese Weise können Sie die Positionseigenschaften Ihrer Divs beibehalten.

Answer 2

Ivan,

es ist schwer zu sehen, warum der Code in einer benannten Funktion Wrapper sein sollte. Wenn die Verschiebbarkeit nicht ein-/ausgeschaltet werden muss, muss .draggable() nur einmal in einer Struktur $(function(){...}); aufgerufen werden.

Es ist auch schwer zu verstehen, warum Sie statische Daten von PHP in Javascript schreiben müssten. Es sollte nichts über das ziehbare Bild sein, das javascript/jQuery nicht selbst herausfinden kann, indem es das DOM anfragt, und selbst dann ist nicht klar, warum dies notwendig sein könnte.

Ich würde erwarten, so etwas zu sehen:

$(function() { 
    $(".headerimage").draggable({ 
     containment: 'parent', 
     scroll: false, 
     axis: "y", 
     stop: function(event, ui) { 
      $.ajax(
       url: "/modules/users/profile/save.php", 
       data: "profileheaderposition=" + ui.position.top, 
       success: function() { 
        //do something here to indicate that the new position has been successfully saved 
       } 
      ); 
     } 
    }); 
}); 

Answer 3

Ich denke nicht, Sie es in parent enthalten müssen oder sonst gewohnt Sie in der Lage sein, es außerhalb der parent Grenze

Alternativ nach oben zu ziehen, jQuery UI bietet containment innerhalb von zwei Koordinaten.

diesen Code Versuchen Sie,

HTML

<div class="picturecontainer" style="overflow: hidden; position: relative; width: 650px; height: 150px; border: 1px solid #888;"> 
    <img class="headerimage" src="http://www.animize.de/modules/users/profile/images/profileheader/header_3722386791348526090.jpg" /> 
</div> 

JS

$(function() { 
    var img = $(".headerimage"); 
    img.css('cursor', 's-resize'); 
    var x1 = img.parent().width() - img.width(); 
    var y1 = img.parent().height() - img.height(); 
    $(".headerimage").draggable({ 
     containment: [x1,y1,0,0], 
     scroll: false, 
     axis: "y", 
     stop: function(event, ui) { 

     } 
    }); 
});​ 

Demo

Answer 4

Siehe this fiddle für meine Lösung zu diesem. Ich habe auch mit der linken und rechten Maustaste geblättert, was zu diesem Zeitpunkt nicht notwendig ist, aber in Zukunft nützlich sein könnte, wenn Sie ein Bild verwenden möchten, das größer ist als das übergeordnete Element. In Ihrem Fall hat Ihr Bild die gleiche Breite wie sein Elternteil, also fügte ich einen threshold Parameter hinzu, um vertikales Ziehen zuzulassen, ohne dass es durch die getroffenen rechten und linken Grenzen abgebrochen wird.

Ich habe auch einige css für grab und grabbing cursors, so dass ein Cursor-Effekt ähnlich wie wenn Sie ein PDF ziehen, leider die Unterstützung für diesen Cursor ist etwas in einigen Browsern gebrochen (IE und Chrom in meinen Tests) aber firefox zeigt ihnen recht.

Hier meinen Code einfügen, um von einer zukünftigen Geige gebrochenen Link zu verhindern.

HTML:

<br><br><br><br><br><br><br> 
<div class="ui-widget-content" style="padding:10px;"> 

<div class="picturecontainer" style="overflow: hidden; position: relative; width: 650px; height: 150px; border: 1px solid #888;"> 
    <img style="position: absolute;" class="headerimage ui-corner-all" src="http://www.animize.de/modules/users/profile/images/profileheader/header_3722386791348526090.jpg" /> 
    </div> 

</div> 

CSS:

.headerimage { 
    cursor:hand; 
    cursor:grab; 
    cursor:-moz-grab; 
    cursor:-webkit-grab; 
} 
.grabbing { 
    cursor:grabbing !important; 
    cursor:-moz-grabbing !important; 
    cursor:-webkit-grabbing !important; 
} 

javascript:

var container = $(".picturecontainer"); 
var childimage = $(".headerimage"); 

childimage.draggable({ scroll: false, start:function(event,ui) { 
        childimage.addClass('grabbing'); 
    }, stop: function(event, ui) { 
        childimage.removeClass('grabbing'); 
    },drag: function(event,ui) { 
     //left and right threshold 
     //to ease draggin images that have same width as container 
     threshold = 20;//pixels 
     ltop = childimage.offset().top -1 > container.offset().top; 
     lbottom = childimage.offset().top + childimage[0].offsetHeight 
        <= container.offset().top + container[0].offsetHeight; 
     lleft = childimage.offset().left > container.offset().left + threshold; 
     lright = childimage.offset().left + childimage[0].offsetWidth < 
       container.offset().left + container[0].offsetWidth - threshold; 
     if (ltop || lbottom || lleft || lright) { 
      $(this).data("draggable").cancel(); 
      if (ltop) { 
       $(this).offset({ top: $(this).parent().offset().top+1}); 
      } else if (lbottom) { 
       newtop = container.offset().top + container[0].offsetHeight 
         - childimage[0].offsetHeight; 
       $(this).offset({ top: newtop+1}); 
      } else if (lleft) { 
       newleft = container.offset().left; 
       $(this).offset({ left: newleft}); 
      } else if (lright) {      
       newleft = container.offset().left + container[0].offsetWidth; 
          - childimage[0].offsetWidth; 
       $(this).offset({ left: newleft}); 
      } 
     } 
    } 
}).parent().bind('mouseout',function() { 
    childimage.trigger('mouseup'); 
}); 

Answer 5

ich diesen Code in meinem Projekt verwende und es funktioniert gut. Ich habe die Lösung von QQping verwendet und eine kleine Änderung vorgenommen, um das Bild auch nach links und rechts zu bewegen. Ich hoffe, es hilft ..

http://jsfiddle.net/UAgDA/266/

//Moving left and right 
if(ui.position.left >= 0) 
{ 
    ui.position.left = 0; 
}          
else if(ui.position.left <= x1 - x2) 
{  
    ui.position.left = x1 - x2; 
} 

Prost