Just nu i M3-nätverket
Gå till innehåll

Göra mer med Javascript


Admini

Rekommendera Poster

Hej

Jag har fått "låna" ett script som visar mus-lägen i x- och y-led.

Mitt mål är att ändra i scriptet så att jag kan visa och storleksändra en rektangel på en vit yta.

Jag tar tag i ett av de 2 hörnen, vänster-upp och höger-ner och drar i dem som i en flexibel fyrkant.

 

Här har jag lagt scriptet:

http://php.sohbat.se/test/drag_mouse.html

 

Är det nån som kan hjälpa mig och visa vägen?

Tack på förhand

Länk till kommentar
Dela på andra webbplatser

Jag har lyckats "fästa" ena pilen mot övre-vänstra hörnet.

Men nästa pil blir också fäst mot samma hörn, och det är inte meningen.

Länk till kommentar
Dela på andra webbplatser

Vad är det tänkt att skillnaden ska vara mellan de två pilarna? Just nu gör de typ samma sak, dvs både ändrar storlek och förflyttar fyrkanten.

Länk till kommentar
Dela på andra webbplatser

Vad är det tänkt att skillnaden ska vara mellan de två pilarna? Just nu gör de typ samma sak, dvs både ändrar storlek och förflyttar fyrkanten.

 

Tanken var att förflytta kanterna på fyrkanten så att den blir större eller mindre, och placera den där man vill ha den.

Ungefär som i en bildbehandlingsprogram, där du markerar en del av bilden för att kopiera och/eller klippa ut för att använda i något annat.

Länk till kommentar
Dela på andra webbplatser

varför använda du inte jquery ui med funktionen Resizable med $( ".selector" ).resizable( "option", "handles", "n, e, s, w" ); och lägger pilarna i lådan (div) som bakgrundsbilder?

 

jag själv använder  jquery ui , jag skickar med en film hur jag använder Resizable och i filmen tror jag det var w. 

https://www.facebook.com/video.php?v=851354178223709&set=vb.100000474038294&type=3&theater

Länk till kommentar
Dela på andra webbplatser

varför använda du inte jquery ui med funktionen Resizable med $( ".selector" ).resizable( "option", "handles", "n, e, s, w" ); och lägger pilarna i lådan (div) som bakgrundsbilder?

Oj! Det låter som att det funkar! Men hur gör jag exakt?

Jag kan inte jquery, är det som JS?

Ska jag bara lägga in koden inuti min nånstans?

Tacksam för förklaring!

:thumbsup:

Länk till kommentar
Dela på andra webbplatser

Jag kan inte jquery, är det som JS?

 

jQuery ÄR JavaScript. Det är ett library som är skrivet för att underlätta och snabba upp JS-utveckling samtidigt som det normaliserar diverse inkonsekvenser och buggar som kan uppträda i olika browsers.

 

Så allt som du kan göra i jQuery kan du göra i ren (vanilla) JavaScript. jQuery UI är som en plugin till jQuery som underlättar när man skapar olika slags GUI-komponenter. En del av jQuery UI är just draggable/droppable som kan vara användbar för dig. Jag använde draggable/droppable i ett litet patiens-spel som jag gjorde.

Länk till kommentar
Dela på andra webbplatser

Oj! Det låter som att det funkar! Men hur gör jag exakt?

Jag kan inte jquery, är det som JS?

Ska jag bara lägga in koden inuti min nånstans?

Tacksam för förklaring!

:thumbsup:

 

du börjar med gå in på sidan  http://jqueryui.com/resizable/  

där finns det demos. om du kollar  view source på de demos se du hur man använder . 

jquery ui är ett javascript vertyg för att lättare hantera javascript

med andra ord du behöver inte skriva 5000 rader kod.

 jag skriver mer efter du har gjort det för att annars tror jag blir för mycket för dig att ta in 

Länk till kommentar
Dela på andra webbplatser

du börjar med gå in på sidan  http://jqueryui.com/resizable/

där finns det demos. om du kollar  view source på de demos se du hur man använder . 

jquery ui är ett javascript vertyg för att lättare hantera javascript

med andra ord du behöver inte skriva 5000 rader kod.

 jag skriver mer efter du har gjort det för att annars tror jag blir för mycket för dig att ta in 

 Wooow!

 Så enkelt :)

Jag kopierade koden från Resizable en fil här:

http://php.sohbat.se/test/resizeable.html

Jag skulle vilja nu att jag fick en "kant" till på övre vänstra hörn också. Går det?

Tack

Länk till kommentar
Dela på andra webbplatser

$(function() {
$( "#resizable" ).resizable();
handles: {
        'ne': '#negrip',
        'se': '#segrip',
        'sw': '#swgrip',
        'nw': '#nwgrip'
}
});

det är lite galet skrivit eller en miss bara 

$(function() {
$( "#resizable" ).resizable(
.resizable({
handles: {
'ne': '#negrip',
'se': '#segrip',
'sw': '#swgrip',
'nw': '#nwgrip'
}
});
 
jag hänvisar  till http://jsfiddle.net/digitalaxis/j2JU6/ som fanns i länken föregående inlägget 
Länk till kommentar
Dela på andra webbplatser

 

$(function() {
$( "#resizable" ).resizable();
handles: {
        'ne': '#negrip',
        'se': '#segrip',
        'sw': '#swgrip',
        'nw': '#nwgrip'
}
});

 

det är lite galet skrivit eller en miss bara 

 

$(function() {
$( "#resizable" ).resizable(
.resizable({

handles: {

'ne': '#negrip',

'se': '#segrip',

'sw': '#swgrip',

'nw': '#nwgrip'

}

});
 
jag hänvisar  till http://jsfiddle.net/digitalaxis/j2JU6/ som fanns i länken föregående inlägget 

 

Vilken är rätt? översta eller nedersta?

Jag har även använt koden du hänvisa till , men samma sak.

Har provat båda,...  samma resultat.

Länk till kommentar
Dela på andra webbplatser

problemet 

 

är att du måste avsluta

$(function(){

// din jquery  kod 

 

$( "#resizable" ).resizable({
handles: {
'ne': '#negrip',
'se': '#segrip',
'sw': '#swgrip',
'nw': '#nwgrip'
}
});

 

// avslut 

});

Länk till kommentar
Dela på andra webbplatser

problemet 

 

är att du måste avsluta

$(function(){

// din jquery  kod 

 

$( "#resizable" ).resizable({
handles: {

'ne': '#negrip',

'se': '#segrip',

'sw': '#swgrip',

'nw': '#nwgrip'

}

});

 

// avslut 

});

Tack det var det!

Ok, nu funkar det som det ska. Nu behöver jag bara ta reda på positionen för alla hörnen. x och y värden för alla punkter måste fångas upp och skickas till nästa sida.

Är det möjligt i det läget eller?

Länk till kommentar
Dela på andra webbplatser

svar ja

jag  antar du menar 

top = h 

top + Height  = h1

 

left = x

left + Width =x1

 

 

jag vet inte om du vill ha de värde när du drag klar 

 

du behover 

http://api.jquery.com/offset/

 

http://api.jquery.com/innerHeight/

$( "#resizable" ).offset(); + $( "#resizable" ).innerHeight()

 

 

 

http://api.jquery.com/innerWidth/

$( "#resizable" ).offset(); +  $( "#resizable" ).innerWidth()

Länk till kommentar
Dela på andra webbplatser

svar ja

jag  antar du menar 

top = h 

top + Height  = h1

 

left = x

left + Width =x1

 

 

jag vet inte om du vill ha de värde när du drag klar 

 

du behover 

http://api.jquery.com/offset/

 

http://api.jquery.com/innerHeight/

$( "#resizable" ).offset(); + $( "#resizable" ).innerHeight()

 

 

 

http://api.jquery.com/innerWidth/

$( "#resizable" ).offset(); +  $( "#resizable" ).innerWidth()

Ja, jag behöver värdena när jag dragit klar.

Jag gjorde så här:

function showxy()
	{
	var a1 = $( "#elementResizable" ).offset(); + $( "#elementResizable" ).innerHeight();
	alert(a1);
	}

Men jag får bara "object Object" när jag klickar o triggar functionen showxy

Länk till kommentar
Dela på andra webbplatser

Ja, jag behöver värdena när jag dragit klar.

Jag gjorde så här:

function showxy()
	{
	var a1 = $( "#elementResizable" ).offset(); + $( "#elementResizable" ).innerHeight();
	alert(a1);
	}

Men jag får bara "object Object" när jag klickar o triggar functionen showxy

då har du inte kolla på länken http://api.jquery.com/offset/ i exemplet 

 

jag hittar en bättre lösning 

http://api.jqueryui.com/resizable/#event-stop

 

$( ".selector" ).resizable({
stop: function( event, ui ) {// du få kolla på länken och skriva klart
 
ui.position.top + ui.size.height;
ui.position.left + ui.size.width;
},

handles: {

'ne': '#negrip',

'se': '#segrip',

'sw': '#swgrip',

'nw': '#nwgrip'

}

});
Länk till kommentar
Dela på andra webbplatser

då har du inte kolla på länken http://api.jquery.com/offset/ i exemplet 

Jag har kollat på länken, men ju mer jag stirrar på den desto mindre fattar jag:

var a1 = $( "#elementResizable" ).offset.left; + $( "#elementResizable" ).offset.top;

Det här ger tomma värden. Jag antar det är fel ... nånstans

Länk till kommentar
Dela på andra webbplatser

du måste skapa objekt innan kan hämta värdna 

position = $( "#elementResizable" ).offset();

gå jämföra med 
$obj  = new hej(); 

 

sedan 
position.left
position.top

 

gå jämföra med 

$obj->left 
$ob->top

 

Länk till kommentar
Dela på andra webbplatser

du måste skapa objekt innan kan hämta värdna 

position = $( "#elementResizable" ).offset();

gå jämföra med 

$obj  = new hej(); 

 

sedan 

position.left

position.top

 

gå jämföra med 

$obj->left 

$ob->top

 

 

Jag förstår att jag måste definiera objektet först, vilket det här gör:

position = $( "#elementResizable" ).offset();

Eller hur?

Men att "jämföra med $obj = new hej();

Det förstår jag inte

 

Jag håller på att bli tokig. Hjärnan funkar inte längre ...

Länk till kommentar
Dela på andra webbplatser

Nu har jag lyckats ta ut left och top

var toppen = $( "#elementResizable" ).offset().top;
var leften = $( "#elementResizable" ).offset().left;
alert("topp: " + toppen );
alert("left: " + leften);

Men höjd och bredd blir svårt:

	var vidden = $( "#elementResizable" ).offset().width;
	var hojden = $( "#elementResizable" ).offset().height;
	alert("bredd: " + vidden);
	alert("höjd: " + hojden);

funkar inte ...

Länk till kommentar
Dela på andra webbplatser

Hahaha, ser man på!

Jag har fixat det själv (ja den sista biten) :)

	{
	var toppen = $( "#elementResizable" ).offset().top;
	var leften = $( "#elementResizable" ).offset().left;
	var vidden = $( "#elementResizable" ).innerWidth();
	var hojden = $( "#elementResizable" ).innerHeight();
	alert("topp: " + toppen );
	alert("left: " + leften);
	alert("bredd: " + vidden);
	alert("höjd: " + hojden);
	}

Tack för mig :)

Länk till kommentar
Dela på andra webbplatser

Hahaha, ser man på!

Jag har fixat det själv (ja den sista biten) :)

	{
	var toppen = $( "#elementResizable" ).offset().top;
	var leften = $( "#elementResizable" ).offset().left;
	var vidden = $( "#elementResizable" ).innerWidth();
	var hojden = $( "#elementResizable" ).innerHeight();
	alert("topp: " + toppen );
	alert("left: " + leften);
	alert("bredd: " + vidden);
	alert("höjd: " + hojden);
	}

Tack för mig :)

Ohh Helevete!

Det funkar inte i mobilen :(

Vad beror det på, är det iPhone som är felet?

ajajaj ... inte bra :(

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...