Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

proizvoljno pomeranje objekata po ekranu

[es] :: Javascript i AJAX :: proizvoljno pomeranje objekata po ekranu

[ Pregleda: 2673 | Odgovora: 10 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

v.marko

Član broj: 26565
Poruke: 223
217.26.79.*

Sajt: www.twitter.com/marko999


Profil

icon proizvoljno pomeranje objekata po ekranu30.06.2006. u 10:50 - pre 216 meseci
zdravo svima,

Imam jedno pitanje.
Da li se moze napraviti pomocu javascripta da se objekti(slika ili npr. textblok) mogu proizvoljno rasporedjivati po ekranu.
Npr. imam odredjenu sliku u levom donjem uglu ekrana a ja zelim da je prevucem u desni gornji deo ili bilo gde, proizvoljno?

pozdrav,

Marko
 
Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost


+23 Profil

icon Re: proizvoljno pomeranje objekata po ekranu30.06.2006. u 12:17 - pre 216 meseci
Google: "javascript drag and drop"

[Ovu poruku je menjao Gojko Vujovic dana 30.06.2006. u 21:26 GMT+1]
Banned - Not available
 
Odgovor na temu

v.marko

Član broj: 26565
Poruke: 223
217.26.79.*

Sajt: www.twitter.com/marko999


Profil

icon Re: proizvoljno pomeranje objekata po ekranu30.06.2006. u 13:58 - pre 216 meseci
uuuuuuuuuuuu
hvala puno
razlog zbog kojeg nisam sam potrazio je sto nisam znao pod kojim nazivom da trazim ;)
jos jednom, puno hvala

marko
 
Odgovor na temu

EnigMan

Član broj: 137796
Poruke: 61
*.adsl.beotel.net.



+1 Profil

icon Re: proizvoljno pomeranje objekata po ekranu08.01.2008. u 01:13 - pre 197 meseci
Imam problem!Radim seminarski za fax i trebali smo napraviti jednostavan obrazac ali ja se uvek pravim pametan!Kopirao sam sa neta ceo kod iz JavaScripta za pomeranje objekata ali imam problem!U Mozili mi ne dozvoljava da popunjavam obrazac tj asmo textualne delove!Checkbox i radio dugmad mi dozvoljava!A u internet exploreru mi sve radi kako treba!:( Moze li mi neko pomoci!??

Evo koda cisto da vidite u cemu je problem :



Code:


<style>
<!--
.dragme{position:relative;}
-->
</style>
<script language="JavaScript">
<!--

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left=nn6?tx+e.clientX-x:tx+event.clientX-x;
    dobj.style.top=nn6?ty+e.clientY-y:ty+event.clientY-y;
    return false;
  }
}

function selectmouse(e) 
{
  var fobj=nn6?e.target:event.srcElement;
  var topelement=nn6?"HTML":"BODY";

  while (fobj.tagName!=topelement&&fobj.className!="dragme")
  {
    fobj=nn6?fobj.parentNode:fobj.parentElement;
  }

  if (fobj.className=="dragme")
  {
    isdrag=true;
    dobj=fobj;
    tx=parseInt(dobj.style.left+0);
    ty=parseInt(dobj.style.top+0);
    x=nn6?e.clientX:event.clientX;
    y=nn6?e.clientY:event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

//-->
</script>




A ubacio sam ga :

Code:


<div class="dragme" style="width:400px;height:540px;background-image:url(slike/obrazac.jpg);padding:20px;border:1;color:#ffecc3;font-family:century">
    <form name="milioner" action="mailto:[email protected]" method="post">

.
.
.
.
.
.
</div>
</form>

 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: proizvoljno pomeranje objekata po ekranu08.01.2008. u 10:07 - pre 197 meseci
prvo si zatvorio <div> pa tek onda <form>, a prvo si otvorio <div>... ie to moze da prozvace jer je to ie, dok firefox i ostali koji "drze do standarda" to prijavljuju kao gresku tj ne renderuju lepo stranu (sto je ustvari i ok, samo ako nemas neku ekstenziju tipa firebug neces videti greske osim da svaki cas palis error konzolu)

samo jedno pitanje, sta ce ti drag&drop u ovom slucaju? nije mi bas jasno...
 
Odgovor na temu

EnigMan

Član broj: 137796
Poruke: 61
*.adsl.beotel.net.



+1 Profil

icon Re: proizvoljno pomeranje objekata po ekranu08.01.2008. u 12:44 - pre 197 meseci
Pa kazem, uvek se ja pravim pametan!:))) Zelim samo da vidim kako funkcionise to!Posto tudiram web dizajn a sada sam druga godina i radimo JavaScript i po prvi put se susrecem sa time pa zelim malo da cackam!I palo mi je to na pamet i skinem kod i ne radi mi kako treba!I sada ja zelim da to proradi jer ko zna mozda mi nekad zatreba a ne znam u cemu je problem!A takav sam da volim da kada nesto radim, radim kako treba!:)))) Sam sam sebi zakomplikovao, znam!:)))) Ali takav sam!
I hvala na odgovoru ali nije u tome problem!Izmenio sam gresku koju si mi rekao sto nisam sam skontao ali opet isto!Ne dozvoljava mi da popunim text!Ako treba dacu ceo kod obrazca mozda je greska u samom postavljanju objekata ili u njihovom kodu!Mozda se ne slaze sa ovim iz JavaScript-a sto sam skinuo sa neta!
Znam da je to skroz nepotrebno, ali sam hteo da vidim kako izgleda i sada kada to ne funkcionise bas kako treba mene interesuje u cemu je greska!Da radi mozda bi ja to i obrisao a kod sacuvao negde!:)))) Ma ja uvek komplikujem!:))))
 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: proizvoljno pomeranje objekata po ekranu08.01.2008. u 21:21 - pre 197 meseci
pa valjalo bi kad bi dao ceo kod (ne samo kod forme), mozda imas nesto u css-u sto ti ne da da uneses text...
 
Odgovor na temu

EnigMan

Član broj: 137796
Poruke: 61
*.adsl.beotel.net.



+1 Profil

icon Re: proizvoljno pomeranje objekata po ekranu08.01.2008. u 23:56 - pre 197 meseci
Evo ceo kod!:D Nadam se da ces uspeti da mi pomognes i zahvaljujem unapred!To je ceo obrazac kako treba da izgleda!Tu jos treba da radim nesto ali imam jos vremena, nije kompletno zavrseno.Mozda ima nekakve veze sa pozicijama?



Code:


<html>
    <head>
        <style type="text/css">
            h1{color:#ffecc3;text-align:center;style:underlinel;font-size:20px;font-weight:bold}
            body{font-size:12px}
            .polja{position:absolute;left:350px}
            span{color:#ffd200}
        </style>
    

<style>
<!--
.dragme{position:relative;}
-->
</style>

<script language="JavaScript">
<!--

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left=nn6?tx+e.clientX-x:tx+event.clientX-x;
    dobj.style.top=nn6?ty+e.clientY-y:ty+event.clientY-y;
    return false;
  }
}

function selectmouse(e) 
{
  var fobj=nn6?e.target:event.srcElement;
  var topelement=nn6?"HTML":"BODY";

  while (fobj.tagName!=topelement&&fobj.className!="dragme")
  {
    fobj=nn6?fobj.parentNode:fobj.parentElement;
  }

  if (fobj.className=="dragme")
  {
    isdrag=true;
    dobj=fobj;
    tx=parseInt(dobj.style.left+0);
    ty=parseInt(dobj.style.top+0);
    x=nn6?e.clientX:event.clientX;
    y=nn6?e.clientY:event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

//-->
</script>



    </head>
    
<body>

    <div class="dragme" style="width:400px;height:540px;background-image:url(slike/obrazac.jpg);padding:20px;border:1;color:#ffecc3;font-family:century">
    <form name="milioner" action="mailto:[email protected]" method="post">
    
            <h1>&#381elite da postanete MILIONER???</h1>
            
            <p>Ime  <span>*</span>:<input style="position:absolute;left:170px" type="text" name="Ime" size="28" title="Upi&#353ite va&#353e ime"><br>
            <p>Prezime  <span>*</span>:<input style="position:absolute;left:170px" type="text" name="Prezime" size="28" title="Upi&#353 va&#353e prezime"><br>
            <p>e mail adresa <span>*</span>:<input style="position:absolute;left:170px" type="text" name="mail" size="28" title="Upi&#353 va&#353u e-mail adresu"><br>
            <p>&#381elite da postanete milioner ? <input style="position:relative;left:40px" type="radio" name="pitanje" value="da" checked>Da
                                                  <input style="position:relative;left:40px" type="radio" name="pitanje" value="ne">Ne<br>
            <p>A zbog &#269ega ? <div style="position:absolute;left:130px;top:208px;color:#ffecc3">
                                 <input style="position:absolute;left:220px" type="checkbox" name="a1" value="on">Napa&#263en sam<br>
                                 <input style="position:absolute;left:220px" type="checkbox" name="a2" value="on">Iskompleksiran sam<br>
                                 <input style="position:absolute;left:220px" type="checkbox" name="a3" value="on">Da kupim pa&#382nju jer je nemam<br>
                                 <input style="position:absolute;left:220px" type="checkbox" name="a4" value="on">Za bolji &#382ivot svojih bli&#382njih<br>
                                 <input style="position:absolute;left:220px" type="checkbox" name="a5" value="on">Sebi&#269an sam<br>
                                 <p>Neki drugi razlog ? <textarea name="razlog" rows="3" cols="25"></textarea></p>
                                 </div></p>
            <p style="position:absolute;left20px;top:410px">Va&#353a stru&#269na sprema je :
                                                            <select name="meni">
                                                                <option>Osnovna &#353kola </option>
                                                                <option>Srednja &#353kola </option>
                                                                <option>Vi&#353a &#353kola </option>
                                                                <option>Fakultet </option>
                                                                <option>Magistratura </option>
                                                                <option>Doktorat </option>
                                                            </select>
            <p style="position:absolute;text-align:center;margin-top:250px"><input style="background:#646464;color:#ffecc3" type="submit" value="Po&#353alji">
                <input style="background:#646464;color:#ffecc3" type="reset" value="Poni&#353ti"></p>
    </form>
    </div>

</body>

</html>

 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: proizvoljno pomeranje objekata po ekranu09.01.2008. u 16:25 - pre 197 meseci
samo u selectmouse stavi return true (umesto false):
Code:

function selectmouse(e) 
{
  var fobj=nn6?e.target:event.srcElement;
  var topelement=nn6?"HTML":"BODY";

  while (fobj.tagName!=topelement&&fobj.className!="dragme")
  {
    fobj=nn6?fobj.parentNode:fobj.parentElement;
  }

  if (fobj.className=="dragme")
  {
    isdrag=true;
    dobj=fobj;
    tx=parseInt(dobj.style.left+0);
    ty=parseInt(dobj.style.top+0);
    x=nn6?e.clientX:event.clientX;
    y=nn6?e.clientY:event.clientY;
    document.onmousemove=movemouse;
    return true;
  }
}

 
Odgovor na temu

EnigMan

Član broj: 137796
Poruke: 61
*.adsl.beotel.net.



+1 Profil

icon Re: proizvoljno pomeranje objekata po ekranu09.01.2008. u 21:15 - pre 197 meseci
Zahvaljujem puno!Radi sve kako treba!Imam ja na tom obrascu jos da poradim sa JavaScriptom pa ako budem imao problem ja se javljam!:))))
Hvala ti jos jednom!
 
Odgovor na temu

NeonDragon
onaj odande
Pančevo

Član broj: 169069
Poruke: 184
*.adsl-4.sezampro.yu.

Sajt: www.neondragon.iz.rs


Profil

icon Re: proizvoljno pomeranje objekata po ekranu12.01.2008. u 12:35 - pre 197 meseci
Ovo je puno koda... Najlakse bi bilo pogledati sta nudi jQuery (www.jquery.com). Ja sam sa njim radio admin panel i sve se lako pomera uz pomoc pluginova. Postoji i dokumentacija na njihovom sajtu...
what would master yoda do? your but, kick it, he would.
 
Odgovor na temu

[es] :: Javascript i AJAX :: proizvoljno pomeranje objekata po ekranu

[ Pregleda: 2673 | Odgovora: 10 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.