Question

OK it’s getting awkward, already searched and tried for about 5 hours and I’m just running in circles…

The scenario is easy: It’s the header image of a user profile, it can be dragged into an position and then the top position of the image get’s saved into a DB.

Thanks to Beetroot-Beetroot’s “containment: ‘parent'” I am down to this piece of code, which actually reacts as I want it to! Except for one big problem. The Picture just jumps either to the top or the bottom. There is no smooth scrolling? If I change the ‘parent’ to -‘parent’ it scrolls nicely but… the containment of course isn’t there anymore. Help? 😀

The 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 and last but not least the Header is included like that:

<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" />

As I said hours of googling weren’t giving any results – and if i wouldn’t save the results it would work just fine but oh well…

— Edit —

Right now I am about to cry out -.- I’ve set up a bounty on this one and the tools for helping me ain jsfiddle but an guest account on my webpage which is:
http://www.animize.de

There you can log on to the page with the Username: Gast and the pw gast – Click on the top right on the name (gast) and you’ll see the profile – there you can move the headerpicture – and of course it should behave in another way than it does – help 🙁

Answer 1

Try this fiddle.

I added an if-statement to the drag event which checks the current positioning of the image and sets the current top position into ui.position.top if the condition returns true so the draggable event does not increase or decrease the top position while hitting the boundaries of the div. This way you can keep the position properties of your div’s.