Søg
Avatar billede lkoudal Nybegynder
11. juni 2003 - 00:46 Der er 22 kommentarer og
1 løsning

detect dynamisk flytning af layer

Jeg er igang med et projekt, der inkluderer tilføjelse af elementer på en side, og jeg vil gerne tilføje muligheden for at flytte rundt på elementerne.

Jeg har efter søgning på nettet fundet DHTML API på siden http://www.walterzorn.com/dragdrop/dragdrop_e.htm. Dette virker som den mest fyldestgørende side om dette emne, jeg har fundet so far. Jeg har dog ikke på nogen måde fastsat mig, så hvis nogen har en bedre teknik/måde, så lad mig da endelig høre.

Selve problemet:

listen er hierakisk:

element 1
element 2
element 3
element 4

og nu vil jeg gerne tilføje muligheden for at man ved simpelthen at "tage fat" på element 3, flytte den op over element 2, og så derved ændre rækkefølgen.

Jeg programmerer siden i PHP/Mysql, og er klar over at jeg skal tilføje lidt kode til at ændre rækkefølgen i listen, men jeg kan ikke greje hvordan jeg skal detecte det i javascript.

postulat: man skal lave et layer imellem hvert element, som har en form for "ondrop" event, hvor jeg så kan kalde noget php kode fra. Er dette muligt, eller er jeg igang med at gøre det på en svær måde?

Jeg er ikke 100% sikker på om jeg skulle spørge i DHTML sektionen, men jeg tror javascript er det der er behov for, så derfor spørger jeg her.

Det er et lidt specifikt spørgsmål, og jeg håber på specifikke svar, jeg er ikke ret meget hjemme i javascript, men jeg er en læsehest.
Avatar billede olebole Juniormester
11. juni 2003 - 01:10 #1
<ole>

Hvad er det for elementer, du bruger ... divs?

/mvh
</bole>
Avatar billede olebole Juniormester
11. juni 2003 - 01:42 #2
Du kan prøve denne her:

<html>
<head>
<style type="text/css">
html, body {
  margin: 0;
  padding: 0;
  background: #c0c0c0;
  color: white;
}

.drag {
  background: white;
  color: black;
  position: relative;
  cursor: pointer;
  cursor: hand;
  border: outset;
  border-width: 2px;
}
</style>
<script language="JavaScript1.2">
//Generic Drag Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com

var ie=document.all
var ns6=document.getElementById&&!document.all

var dragapproved=false
var z,x,y

function move(e){
if (dragapproved){
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
return false
}
}

function drags(e){
if (!ie&&!ns6)
return
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"

while (firedobj.tagName!=topelement&&firedobj.className!="drag"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className=="drag"){
dragapproved=true
z=firedobj
temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=ns6? e.clientX: event.clientX
y=ns6? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</script>
<script type="text/JavaScript">
function mySort(a, b) {
    if ( a[0]>b[0] ) return 1;
    if ( a[0]==b[0] ) return 0;
    if ( a[0]<b[0] ) return -1;
}
function getPos(f) {
    var aSpans, endSequens, sequens = new Array();
    aSpans = document.getElementsByTagName("SPAN");
    for (i=0; i<aSpans.length; i++) {
        sequens.push([aSpans[i].offsetTop, aSpans[i].id]);
    }
    sequens.sort(mySort);
    endSequens = new Array();
    for (i=0; i<sequens.length; i++) {
        endSequens.push(sequens[i][1]);
    }
    f.seq.value = endSequens.join(",");
    f.submit();
}
</script>
</head>
<body>
<form action="page.php" method="post">
    <input type="hidden" name="seq">
    <button onclick="getPos(this.form)">TEST</button>
</form>
<span id="elm_0" class='drag'>Element 0</span>
<span id="elm_1" class='drag'>Element 1</span>
<span id="elm_2" class='drag'>Element 2</span>
<span id="elm_3" class='drag'>Element 3</span>
<span id="elm_4" class='drag'>Element 4</span>

</body>
</html>

Så kan du i dokumentet 'page.php' hente værdierne med:

<?

$myElms = explode(",", POST["seq"]);

?>

Så indeholder array'et $myElms rækkefølgen af elementernes id'er.
/mvh
Avatar billede roenving Novice
11. juni 2003 - 03:30 #3
Ha, lkoudal, du har zq stillet et godt spm !-)

-- jeg har selv et projekt igang, hvor en af detaljerne jeg har tænkt mig er at give mulighed for at man kan flytte rundt på rækker i (noget der ligner) en tabel ...

-- jeg kunne sikkert prøve at hoppe ind på denne funktionalitet, da den på mange måder er enkeltstående ift. resten af mit projekt !o)

-- for øvrigt ville jeg gøre det, så elementerne 'poppede' henover og så at sige skiftede plads, når en bestemt overlapning var nået.

;O)
Avatar billede olebole Juniormester
11. juni 2003 - 03:55 #4
Jeg har brugt koden ovenfor til et par rubrik-markeder, jeg har kodet.
Der bruges koden i Admin-systemet til at ændre rækkefølgen af annonce-kategorier, der jo ikke nødvendigvis skal vises i alfabetisk rækkefølge.

Jeg skriver simpelthen en række kasser ud med kategori-navnene i - i rækkefølge hentet fra MySQL.
Derefter kan Admin flytte rundt på dem og gemme den nye rækkefølge i DB'en.
Fungerer upåklageligt  :)
/mvh
Avatar billede roenving Novice
11. juni 2003 - 08:14 #5
-- lyder godt, men pop-effekten (altså at kassen overtager en plads, og pladsen tidligere indehaver hopper væk), har du haft den med ?-)
Avatar billede pelkjaer Nybegynder
11. juni 2003 - 10:53 #6
Jeg er ikke sikker på at det er det samme, men jeg har også gang i noget "drag'n'drop

function startDrag(){
    // get what is being dragged:
    srcObj = window.event.srcElement;

    // store the source of the object into a string acting as a dummy object so we don't ruin the original object:
    dummyObj = srcObj.outerHTML;

    // post the data for Windows:
    var dragData = window.event.dataTransfer;

    // set the type of data for the clipboard:
//    dragData.setData('Text', window.event.srcElement.src);

    // allow only dragging that involves moving the object:
    dragData.effectAllowed = 'linkMove';

    // use the special 'move' cursor when dragging:
    dragData.dropEffect = 'move';
}

function enterDrag() {
    // allow target object to read clipboard:
    window.event.dataTransfer.getData('Text');
}

function endDrag() {
    // when done remove clipboard data
    window.event.dataTransfer.clearData();
}

function overDrag() {
    // tell onOverDrag handler not to do anything:
    window.event.returnValue = false;
}

function dropIt(where) {
  window.event.returnValue = false;
  //Her sker "serverside" MS FSO flytning af filer via querystrings
  window.location="imgViewFiles.asp?obj2move=" + srcObj.myLabel + "&amp;to=" + where.substr(5,100) + "&do=yehaa";
}

<td id="et_id_evt_et_path"" ondrop="dropIt(this.id)" ondragover="overDrag();" ondragenter="enterDrag();"><a href="#" ondragstart="startDrag()" ondragend="endDrag()" myLabel="evt_et_filnavn_der_skal_flyttes" onclick="return false;">MyPic.gif</a></td>
Avatar billede pelkjaer Nybegynder
11. juni 2003 - 10:55 #7
Sammen med en border-bottom:1px solid black på startDrag() fungerer det ganske fint - IE only of course :o)
Avatar billede roenving Novice
11. juni 2003 - 11:05 #8
Du nåede at få tilføjelsen med ,-)

Hvorfor har du forøvrigt kun encoded den ene & ?-)
Avatar billede pelkjaer Nybegynder
11. juni 2003 - 11:07 #9
Well - det er beta endnu *G* - men det virker :-)
Avatar billede roenving Novice
11. juni 2003 - 11:12 #10
oki, men sådan som jeg læser lkoudals spm, er det nok nærmere den, som ole har angivet, der skal bruges ...

-- og det jeg skal bruge kan ganske glimrende tage udgangspunkt i dette også ;O)
Avatar billede pelkjaer Nybegynder
11. juni 2003 - 11:15 #11
Det er da muligt - men med en liste af elementer opstillet fx.

elem 1
elem 2
elem 3

Vil det være muligt at hive fat i 2 og hive det ned under 3. Så må man så via serversiden derefter enten skifte et id, et path eller whatever.
Avatar billede roenving Novice
11. juni 2003 - 11:18 #12
Jeg har tænkt mig kun at arbejde client-side -- jeg arbejder på en stand-alone-applikation !O)

-- og normalt vil jeg alligevel forsøge at undgå opkald, som ikke indbefatter nødvendig overførsel af egentlige data ...
Avatar billede pelkjaer Nybegynder
11. juni 2003 - 11:22 #13
soot yourself - it's only another option =oD
Avatar billede roenving Novice
11. juni 2003 - 11:43 #14
-- men jeg takker da for omsorgen -- måske får jeg brug for det også en dag ;O)
Avatar billede pelkjaer Nybegynder
11. juni 2003 - 11:50 #15
No sweat ;o)
Avatar billede roenving Novice
11. juni 2003 - 11:59 #16
*g*
Avatar billede lkoudal Nybegynder
11. juni 2003 - 12:46 #17
Jeg takker for alle jeres kommentarer, det er en fornøjelse at se at hvor hurtigt folk svarer herinde. :-)

Jeg takker ærbødigst alle, og giver point til olebole, der skal stadig lige arbejdes lidt med den, men jeg er meget glad for et "working example" til at sætte mig i gang.
Avatar billede lkoudal Nybegynder
11. juni 2003 - 12:49 #18
olebole, det var kælenavnet på en studiekammerat, du skulle vel aldrig have gået på IMMA for nogle år tilbage?
Avatar billede olebole Juniormester
12. juni 2003 - 15:14 #19
Takker  :)
Nej, jeg gik på Space Invaders - Crew 5 ... fra 98. Men vis mig en Ole - og jeg skal vise dig én, der er blevet kaldt OleBole  ;o)
Tilbage i 50'erne brugte man i Folkeskolen en danskbog, der hed "Læs med OleBole". Jeg har ikke selv brugt den - den var afløst af "Søren og Mette" i begyndelsen af 60'erne, da jeg begyndte i skolen - men OleBole er et gammelt, 'standard' kælenavn.

Faktisk fik jeg engang en meget bekymret mail fra en anden Ole, som har olebole.dk og flere andre olebole-domæner.
Han havde set mig her på E og ville gerne vide, hvormeget jeg havde tænkt mig at føre mig frem som OleBole på nettet. Han mente helt tydeligt, at _han_ var WWW's OleBole - og at det ville være yderst upassende, hvis jeg ville begynde at gå ham i bedene i den rolle.
Han kunne jo ikke ligge og købe alle olebole-domæner op ... *ROTFLMAO*

roenving >> (11/06-2003 08:14:41) Ikke i denne version. Jeg har lavet en anden, men jeg skal jo også selv leve af noget ... ikke kun fodre sultne gøgeunger  ;oD
/mvh
Avatar billede olebole Juniormester
12. juni 2003 - 15:17 #20
... i øvrigt er det ikke fikst, hvis elementerne skifter plads - men elementet, der flyttes, skal bare skubbe de andre på plads. Ligesom når du f.eks. flytter et lag i Photoshop  :)
Avatar billede roenving Novice
12. juni 2003 - 17:33 #21
>>Nu var det lige sådan noget tabel-agtigt jeg tænkte i, så synsindtrykket skal være sådan ...
-- men hvordan forholder jeg mig så, hvis der flyttes mange rækker ...

hmmm, tja, bum, bum ,o]
Avatar billede olebole Juniormester
12. juni 2003 - 17:56 #22
Sid dog ikke indenfor i det dejlige vejr, roenving. Gå dog en tur ... en LANG tur, roenving ... GÅ NU ... SKRIIIIIID, ROENVING ...!!!  ;oD
Avatar billede roenving Novice
12. juni 2003 - 17:59 #23
*gg*
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 15:02 Gemme besked fra Facebook / Messenger Af lurup i Sociale medier
29/0820:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
26/0813:28 Findes der en brugsanvisning til : "ONKYO Stereo Casette - Tape Deck - R1" Af Ikke-ekspert i Musik & videoafspillere
24/0820:07 Libra Office 26.2.5.2 - Er sort - Kan an ændre til lysere baggrund ? (Windows 11) Af Ikke-ekspert i Office & Kontorpakker
White papers
Flere white papers »