[dojo] Moveable items binnen een grid houden

woensdag 24 maart 2010 11:31

Acties:

0 Henk 'm!

Topicstarter

Aloha

ik ben als Dojo/css/js noob begonnen met het maken van een layout met movable divjes. (code onderaan post)

Maar, wat ik wil is dat de moveable items binnen een "grid" achtig idee blijven, en niet overal heen verplaatst kunnen worden. Met het dojo.dnd.Moveable event kun je objecten mooi verplaatsen, maar je kan ze dan overal neerzetten en dat wil ik dus niet.

Uitgangspositie:
Afbeeldingslocatie: http://www.d2k.nl/domino/media/blogs/blog/dojovoor.png

Afbeeldingslocatie: http://www.d2k.nl/domino/media/blogs/blog/dojovoor.png

Na verplaatsen:
Afbeeldingslocatie: http://www.d2k.nl/domino/media/blogs/blog/dojona.png

Wat ik eigenlijk wil:
Afbeeldingslocatie: http://www.d2k.nl/domino/media/blogs/blog/dojovraag.png

het item mag dus wel naar het gele vakje verplaatst worden, maar niet geplaatst worden zoals het rode vakje.

Ik wil dus eigenlijk een "vaste" layout maken, waarbinnen de divjes verplaatst kunnen worden.

Iemand suggesties in welke hoek ik het zou moeten zoeken?

HTML:

<html>
<head>
<script type="text/javascript" src="/domjs/dojo-1.3.2/dojo/dojo.js" djConfig="locale: 'en-us', parseOnLoad: true"></script>
<script type="text/javascript">
    dojo.require('dojo.parser');
    dojo.require('dojo.dnd.Source');
    dojo.require('dojo.dnd.Moveable');
</script>
<style> 
div.float {
  float: left;
  width: 75px;
  height: 75px;
  border: 1px solid;
  border-spacing:50px;
  margin-left:10px; 
  margin-top:10px;
  }
  
div.float p {
   text-align: center;
   }
</style> 


</head>
<body>
<div dojoType="dojo.dnd.Moveable" handle="dragHandle">
    <div class="dojoDndItem">
        <span class="dojoDndHandle">
            <div class="float" style="border: 1px solid;">
                <p></p>
            </div>
        </span>
    </div>
</div>

<div dojoType="dojo.dnd.Moveable" handle="dragHandle">
    <div class="dojoDndItem">
        <span class="dojoDndHandle">
            <div class="float" style="border: 1px solid;">
                <p></p>
            </div>
        </span>
    </div>
</div>
</body>
</html>

Doet iets met Cloud (MS/IBM)

woensdag 24 maart 2010 12:35

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

Je kunt de left/top coördinaten toch gewoon "afronden" naar
a) het dichts bijzijnde grid positie (het rode blok zou 'snappen' naar G8 (op 't oog, kan ook E8 zijn))
b) naar links en boven op het grid (het rode blok zou 'snappen' naar E6)

Waarbij ik optie b het meest intuïtief vind.

[ Voor 9% gewijzigd door RobIII op 24-03-2010 12:36 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 24 maart 2010 12:57

Acties:

0 Henk 'm!

Bozozo

Your ad here?

Wat RobIII zegt (al ben ik meer voor optie a), plus een halftransparante kopie van het element aan de cursor plakken. Dan heeft de gebruiker nog het idee dat hij iets 'vast heeft' met de cursor.

TabCinema : NiftySplit

woensdag 24 maart 2010 17:31

Acties:

0 Henk 'm!

D2k

Topicstarter

Hmmz ik zal me eens verdiepen in het plaatsen van items met coordinaten.
Nog nooit gedaan.
Ik ben er nog niet helemaal uit hoe ik mijn grid moet gaan opbouwen, dus ik ga me daar even mee bezig houden, en dan het plaatsen daarna maar doen denk ik?

Doet iets met Cloud (MS/IBM)

woensdag 24 maart 2010 17:48

Acties:

0 Henk 'm!

Tharulerz

Je kiest gewoon welke verhouding je grid heeft, zet dit om in een soort van wiskundige formule, (eigenlijk enkel de linkerbovenhoeken interesseren je), en dan ga je elke keer als iemand sleept kijken wat de dichtstbijzijnde of afgeronde linkerbovenhoek is, en verplaats je de div naar daar.

vrijdag 2 april 2010 08:14

Acties:

0 Henk 'm!

D2k

Topicstarter

Nog even de oplossing voor dit probleem: jQuery ;-)

JavaScript:

1	$("#draggable1").draggable({ grid: [97, 97], containment: '#containment'} });

Problem solved

Doet iets met Cloud (MS/IBM)

vrijdag 2 april 2010 08:35

Acties:

0 Henk 'm!

iH8

waarom maak je geen gebruik van dojox.layout.Gridcontainer?!?

It displays the child elements by column (ie: the childs widths are fixed by the column width of the grid but the childs heights are free). Each child is movable by drag and drop inside the Grid Container. The position of other children is automatically calculated when a child is moved

Aunt bunny is coming to get me!

zondag 4 april 2010 15:20

Acties:

0 Henk 'm!

D2k

Topicstarter

1/ heb er geen ervaring mee
2/ Dojo docs zijn niet je van het
3/ ik had dit met jquery in een uurtje, en in dojo nog niet in 5 dagen.
4/ Ik wil wel, maar er zijn weinig samples die ik zo vind. Ik ga er iig wel even naar kijken. Tnx

Doet iets met Cloud (MS/IBM)

zondag 4 april 2010 16:17

Acties:

0 Henk 'm!

iH8

de API is goed gedocumenteerd vind ik, de reference mist idd hier en daar wat examples. anders kijk je even door de tests heen:

http://archive.dojotoolki...olkit/dojox/layout/tests/

Aunt bunny is coming to get me!

Onderwerpen