JQuery przeciągać obraz z zapisanej pozycji

Question

OK robi się niezręcznie, już szukał i próbował przez około 5 godzin, a ja po prostu działa w kręgach ...

Scenariusz jest prosty: To obraz nagłówek profilu użytkownika , można go przeciągnąć w położenie, a następnie górna pozycja obrazu zostaje zapisana do bazy danych.

Dzięki "rodzicowi" z Beetroot-Beetroot: "Sprowadziłem się do tego kawałka kodu, który reaguje tak, jak chcę! Z wyjątkiem jednego dużego problemu. Obraz po prostu przeskakuje na górę lub na dół. Nie ma płynnego przewijania? Jeśli zmienię "rodzica" na "-parent", to ładnie się przewija, ale ... nie ma już miejsca na zamknięcie. Wsparcie? : D

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); 
      }); 
     } 
    });     
}); 

Więc i last but not least nagłówku jest wliczone tak:

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

Jak powiedziałem godzin googlowania nie dawały żadnych rezultatów - a jeśli I nie byłoby zapisać wyniki to działa dobrze, ale cóż ...

- Edit -

Teraz mam zamiar krzyknąć -.- mam założyć bounty na ten jeden i narzędzi za pomoc ain jsfiddle ale uwagę gości na mojej stronie internetowej, która jest: http://www.animize.de

Nie można zalogować na stronie z nazwą użytkownika: Gast i pw gast - kliknij w prawym górnym rogu nazwy (gast), a zobaczysz profil - tam możesz przesunąć headplicture - i oczywiście powinien zachowywać się w inny sposób niż robi - pomoc :(

Answer 1

Spróbuj this fiddle.

Dodałem instrukcję if do zdarzenia drag, które sprawdza bieżące położenie obrazu i ustawia bieżącą najwyższą pozycję na ui.position.top, jeśli warunek zwróci wartość true, więc zdarzenie przeciągalne nie zwiększa ani nie zmniejsza górnej pozycji podczas uderzania w granice div. W ten sposób możesz zachować właściwości pozycji twojego div.

Answer 2

Ivan,

trudno zrozumieć, dlaczego kod powinien być w funkcji nazwanej owijki. O ile nie trzeba włączać/wyłączać funkcji przeciągania, wówczas trzeba tylko raz wywołać .draggable() w strukturze $(function(){...});.

Trudno również zrozumieć, dlaczego trzeba zapisać statyczne dane z php w javascript. Nie powinno być nic o przeciągalnym obrazie, którego javascript/jQuery nie może sam odkryć, wypytując DOM, a nawet wtedy nie jest jasne, dlaczego to konieczne.

spodziewałbym się zobaczyć coś takiego:

$(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

nie sądzę trzeba zawierać go wewnątrz parent albo przyzwyczajenie móc przeciągnij go w górę poza granicami parent

Alternatywnie, jQuery ui zapewnia containment wewnątrz dwóch współrzędnych.

Spróbuj tego kodu,

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

Zobacz moje rozwiązanie tego problemu na this fiddle. Zajmowałem się także przeciąganiem w lewo i w prawo, co nie jest obecnie konieczne w twoim przypadku, ale może być przydatne w przyszłości, jeśli zamierzasz użyć obrazu większego niż jego rodzic. W twoim przypadku obraz ma taką samą szerokość jak jego rodzic, więc dodałem parametr threshold, aby umożliwić użycie przeciągania pionowego bez anulowania przez trafienie prawej i lewej krawędzi.

Dodałem także kilka kursorów dla kursorów grab i grabbing, więc aby uzyskać efekt kursora podobny do przeciągania pliku PDF, obsługa niektórych kursorów jest nieco uszkodzona w niektórych przeglądarkach (IE i chrome w moich testach) ale firefox pokazuje im dobrze.

Wklejam tutaj mój kod, aby zapobiec uszkodzeniu linka w przyszłości.

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

Używam tego kodu w moim projekcie i to działa dobrze. Użyłem rozwiązania z QQping i właśnie zrobiłem niewielką zmianę, aby obraz również przesunął się w lewo i prawo. Mam nadzieję, że to pomaga ..

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; 
} 

Cheers