[ v.marko @ 30.06.2006. 10:50 ] @
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
[ Br@nkoR @ 30.06.2006. 12:17 ] @
Google: "javascript drag and drop"

[Ovu poruku je menjao Gojko Vujovic dana 30.06.2006. u 21:26 GMT+1]
[ v.marko @ 30.06.2006. 13:58 ] @
uuuuuuuuuuuu
hvala puno
razlog zbog kojeg nisam sam potrazio je sto nisam znao pod kojim nazivom da trazim ;)
jos jednom, puno hvala

marko
[ EnigMan @ 08.01.2008. 01:13 ] @
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>

[ Aleksandar Ružičić @ 08.01.2008. 10:07 ] @
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...
[ EnigMan @ 08.01.2008. 12:44 ] @
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!:))))
[ Aleksandar Ružičić @ 08.01.2008. 21:21 ] @
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...
[ EnigMan @ 08.01.2008. 23:56 ] @
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>

[ Aleksandar Ružičić @ 09.01.2008. 16:25 ] @
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;
  }
}
[ EnigMan @ 09.01.2008. 21:15 ] @
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!
[ NeonDragon @ 12.01.2008. 12:35 ] @
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...