Java? plaatjes sorteren in <form> - Softwareontwikkeling

dinsdag 18 maart 2003 01:06

Acties:

Topicstarter

Ik ben bezig om een web-based enquete te bouwen voor wetenschappelijk onderzoek. De meeste vragen kunnen simpel met php/mysql afgehandeld worden. Op een vraag loop ik echter vast.
Het is de bedoeling dat de respondenten (degenen die de enquete invullen) 19 pasfoto's sorteren naar de aantrekkelijkheid van de mensen die er op staan. Omdat het niet erg overzichtelijk invullen is wanneer je 19 foto's van een nummer moet voorzien zat ik te denken aan een "drag-and-drop"-systeem (ik denk dat ik Java nodig heb):

Het is de bedoeling dat de foto's van een willekeurige plaats naar 19 (genummerde) plaatsen kunnen worden gesleept én kunnen worden gewisseld. Zodra er op "submit" gedrukt wordt wil ik de "foto-nummer"-paren doorgeven aan PHP, of direct in mysql plaatsen.

Ik vroeg mij af of er hier iemand is die iets soortgelijks heeft gemaakt (en de code wil delen), of een tip heeft om me op weg te helpen.
Bij voorbaat dank

Regeren is vooruitschuiven

dinsdag 18 maart 2003 01:13

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Hmmm. Ik heb zo snel geen idee, maar ik ga eens even voor je aan het stoeien... Dit is wel leuk om effe uit te vogelen...

/edit/
Heb 'm al een eindje, maar ga nu pitten. Misschien dat ik er woensdag wat tijd voor heb. Ik hoop dat je er uit komt, of dat iemand anders je kan helpen als je haast hebt...

Het probleem waar ik tegen aan loop is dat ik geen mousemove of mouseover events krijg op het moment dat er een plaatje aan mijn cursor "hangt" in de "destination" tabel. Als dat is opgelost kun je door het TD object uit de destination tabel te pakken de InnerHTML op het IMG object zetten dat je te pakken hebt om zo een mooie "snap" in de cell te krijgen.

Ik vrees wel dat dit very-IE only is...

code:

<html>
<head>
    <title>Untitled</title>
    <script language="JavaScript">
        var oDragPic = null;
        var activeCell = null;
        
        function clickDrag(oPic) {
            if (oDragPic==oPic) {
                oDragPic = null;
                document.body.style.cursor = 'default';
            } else {
                document.body.style.cursor = 'move';
                oDragPic = oPic;
                oDragPic.style.position = 'absolute';
            }
        }

        function doDrag() {
            if (!(oDragPic==null)) {
                oDragPic.style.left = event.x - (oDragPic.width/2);
                oDragPic.style.top = event.y - (oDragPic.height/2);
            }
        }
        
        function setCell(sID) {
            alert(sID);
            activeCell=sID;
        }
    </script>

</head>

<body>

Sleep deze plaatjes:
<table cellpadding="1" cellspacing="1" border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td width="100" height="100">[img]"ba02.gif"[/img]</td>
        <td width="100" height="100">[img]"ba03.gif"[/img]</td>
        <td width="100" height="100">[img]"ba04.gif"[/img]</td>
        <td width="100" height="100">[img]"ba05.gif"[/img]</td>
    </tr>
    <tr>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
    </tr>
    <tr>
        <td width="100" height="100">[img]"ba06.gif"[/img]</td>
        <td width="100" height="100">[img]"ba07.gif"[/img]</td>
        <td width="100" height="100">[img]"ba08.gif"[/img]</td>
        <td width="100" height="100">[img]"ba09.gif"[/img]</td>
    </tr>
</table>
<hr>
Hier naar toe:
<table cellpadding="1" cellspacing="1" border="1">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td width="100" height="100" id="r1c1" onmousemove="setCell(this.id);">&nbsp;</td>
        <td width="100" height="100" id="r1c2" onmousemove="setCell(this.id);">&nbsp;</td>
        <td width="100" height="100" id="r1c3" onmousemove="setCell(this.id);">&nbsp;</td>
        <td width="100" height="100" id="r1c4" onmousemove="setCell(this.id);">&nbsp;</td>
    </tr>
    <tr>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
    </tr>
    <tr>
        <td width="100" height="100" id="r2c1" onmousemove="setCell(this.id);">&nbsp;</td>
        <td width="100" height="100" id="r2c2" onmousemove="setCell(this.id);">&nbsp;</td>
        <td width="100" height="100" id="r2c3" onmousemove="setCell(this.id);">&nbsp;</td>
        <td width="100" height="100" id="r2c4" onmousemove="setCell(this.id);">&nbsp;</td>
    </tr>
</table>



</body>
</html>

Je moet effe een paar plaatjes (ba02.gif tot ba09.gif) in dezelfde dir gooien om het te testen...

Oh, enne excuses voor de layout...

[ Voor 122% gewijzigd door RobIII op 18-03-2003 01:42 ]

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

dinsdag 18 maart 2003 07:54

Acties:

T-MOB

Topicstarter

Errug :cool: Rob III

Hiermee ben ik in elk geval een eind op weg. Ik ga vandaag even kijken of ik er zo uitkom, ik hou je hier wel op de hoogte. Erg veel haast heb ik er niet mee - en voel je geenszins verplicht. Maar alle hulp wordt gewaardeerd!!

Regeren is vooruitschuiven

dinsdag 18 maart 2003 13:07

Acties:

T-MOB

Topicstarter

Ik heb wat rondgesnuffeld en ik denk dat dit een oplossing kan zijn.

code:

<HTML>
<HEAD>
<TITLE>Drag and Drop Images</TITLE>

</HEAD>

<div id='1' style='position:absolute;left:50;top:50;'>
[img]'ba01.gif'[/img]
</div>
<div id='2' style='position:absolute;left:50;top:100;'>
[img]'ba02.gif'[/img]
</div>

<script language="javascript">

Wholething = (document.all) ? 0 : 1;
var objectone;

function MouseMovement(e) 
 {
if (objectone) {
if (Wholething) {
objectone.moveTo((e.pageX-X), (e.pageY-Y));
 }
else {
objectone.pixelLeft = event.clientX-X + document.body.scrollLeft;
objectone.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
 }
 }
 }


function MouseClickUp() {
objectone = null;
 }

if (Wholething) 
 {
document.captureEvents(Event.mousedown | Event.mousemove | Event.mouseup);
 }

function MouseClickDown(e)
 {
if (Wholething) {
objectone = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
 }
else {
objectone = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
 }
 }

document.onmouseup = MouseClickUp;
document.onmousedown = MouseClickDown;
document.onmousemove = MouseMovement;

</script>

</BODY>
</HTML>

Op deze manier heb je een "event" op het moment dat je het plaatje loslaat, vervolgens zou je kunnen checken of het plaatje boven een (lege!) cel hangt. Zo ja dan kan ie er in, zoniet dan reset je de positie naar de beginstand. Is dit vruchtbaar (ik ben een ontzettende dummmy op Java-gebied)

Regeren is vooruitschuiven

dinsdag 18 maart 2003 15:27

Acties:

Verwijderd

hier op mijn werk hebben we daar een progje voor, IntraQuest.
werkt prima (op wat bugjes na dan)

dinsdag 18 maart 2003 19:34

Acties:

Verwijderd

Wellicht kun je HIER ook nog wat info vinden. Onder 'Drag Overlay'.

[ Voor 6% gewijzigd door Verwijderd op 18-03-2003 19:35 ]