[jQuery UI] .draggable .resizable combineren

[PdeBie]

Hoi allen,

ik maak gebruik van de jQueryUI library voor wat functionaliteiten in een tool die ik aan het maken ben.
Een van die functies is het verplaatsen van een afbeelding binnen een bepaalde div. Daarnaast moet het mogelijk zijn om de afbeelding binnen de div te schalen.

hiervoor heb ik tot nog toe de volgende code:

HTML:

<script type="text/javascript" language="javascript">
$('#<%= SmallImage.ClientID %>')
    .resizable( { containment: "parent" } )
    .draggable( { containment: "#containment-wrapper", scroll: false } )
    .bind("dragstop", function(event, ui) { 
        $('#<%= posX.ClientID %>').val(ui.position.left);
        $('#<%= posY.ClientID %>').val(ui.position.top);
    });
</script>

<div id="containment-wrapper" style="border: solid 1px #000; width:420px; height:100px;">
    <asp:Image ID="SmallImage" runat="server" />
</div>

In eerste instantie had ik enkel de functie '.draggable()' gekoppeld aan de afbeelding. Middels de 'containtment' property kon ik de afbeelding binnen de omliggende div verplaatsen. Tot dusver perfect!

Hierna is het een vereiste dat de afbeelding ook geschaald kon worden binnen de omliggende div.
Hiervoor maak ik gebruik van de '.resizable()' functie. Echter werkt hierna het slepen van de afbeelding niet meer juist.

Dit probleem ontstaat door 2 divs die naast en onder de afbeelding geplaatst worden. Deze divs worden gegenereerd door de '.resizable()' functie en dienen (zoals ik het begrijp) als grepen om de afbeelding mee te schalen.
Echter, als ik de afbeelding nu verplaats ('drag'), dan schuift deze onder die divs en zie de afbeelding niet meer.

Iemand een idee hoe dit op te lossen?

[Don Kedero]

Heb je al gespeeld met de z-index van de DIV?

http://www.w3schools.com/cssref/pr_pos_z-index.asp

[PdeBie]

de z-index van de 'resize'-divs wordt door jQuery op 99999 gezet.

Waarschijnlijk is dat bedoelt om ervoor te zorgen dat ze altijd bovenaan staan. Ik ga het proberen, maar 't lijkt me niet dat dit het gewenste effect heeft.

[PdeBie]

z-index mocht inderdaad niet baten.
Even verder gekeken en toen zag ik nog een property (die ik niet kende) in de CSS in de clipping box om het geheel heen, namelijk 'overflow: hidden'.

Overflow @ w3schools

Deze zorgt ervoor dat de afbeelding 'verdwijnt'. Niet de z-index dus.
Wat ik zou willen is dat deze 'clipping box' mee beweegt als de afbeelding verplaatst wordt.

Dit schijnt te kunnen met de draggable functie van jQuery, dus hier ga ik even verder mee spelen.

[PdeBie]

Heb online een workaround gevonden:
http://aleembawany.com/20...draggable-bug-workaround/

echter loop ik nu nog tegen het probleem aan dat als je een containment mee geeft aan de resizable functie, het resizen niet werkt (wat het eerst wel deed).

Maar ook daar komen we wel uit

[PdeBie]

Toch nog even een vraagje:

zie deze code:

JavaScript:

var height = parseInt($('#<%= maxHeight.ClientID %>').val());
var width = parseInt($('#<%= maxWidth.ClientID %>').val());

$('#<%= SmallImage.ClientID %>')
    .resizable( { maxHeight: height, maxWidth: width, aspectRatio: true } )
    .parent('.ui-wrapper')
    .draggable( { containment: "#containment-wrapper", scroll: false } )
    .bind("dragstop", function(event, ui) { 
        alert("left : " + ui.position.left);
        $('#<%= posX.ClientID %>').val(ui.position.left);                    
        $('#<%= posY.ClientID %>').val(ui.position.top);
        $('#<%= sWidth.ClientID %>').val($('#<%= SmallImage.ClientID %>').width());                    
        $('#<%= sHeight.ClientID %>').val($('#<%= SmallImage.ClientID %>').height());
        });

De image 'SmallImage' is zowel draggable als resizable. Dit gaat goed.
Nu moet ik de positie van de afbeelding nog opslaan.

De positie opvragen gaat middels de 'ui.position' property. Deze property geeft de positie van het object t.o.v. het parent object.
De image zit in een div en als ik de afbeelding verplaats krijg ik keurig de 'left' terug in de alert.
Dus als ik hem 50 pixels naar rechts verplaats, krijg ik mijn alert netjes '50'.
Als ik de afbeelding eerst resize en dan verplaats, krijg ik ineens niet meer de left t.o.v. de parent terug, maar de left t.o.v. het window.
Dus waar hij eerst netjes 50 aangeeft, zegt hij ineens 420 bij mij.

Iemand een idee hoe ik alsnog de position t.o.v. van de parent div kan krijgen ipv de window?