[js] Goeroe gezocht voor event probleem. - Softwareontwikkeling

woensdag 23 april 2003 13:37

Acties:

Verwijderd

Topicstarter

Hallo, ik ben al een tijdje met het volgende probleem aan het worstelen en ik hoop echt dat er hier een slimmerik is die me ermee kan helpen. Ik ben bezig met een wysiwyg editortje in een iframe. Nu kunnen gebruikers vaste elementen hierin plaatsen. Ze kunnen deze ook verslepen naar cellen die groter of gelijk zijn aan de grootte van dit vaste element.

Ik doe dit door op ondragstart de contentEditable property van alle kleinere cellen temporary op false te zetten. Dit werkt allemaal fantastisch, alleen kopieert hij het gesleepte element ipv verplaatsen.

Hieronder de code:
[index.htm]

code:

<html>
<head>
<script language="JavaScript">
function startDrag(element)
{
    // haal de grootte van het element op.
    start_resize_breedte= element.clientWidth;

    // loop alle cellen langs en zet de cellen die smaller zijn contentEditable=false
    var alle_cellen = foo.document.body.getElementsByTagName("TD");
    
    for (i=0; i < alle_cellen.length; i++)
    {
        if(alle_cellen[i].width < start_resize_breedte)
        {
             alle_cellen[i].innerHTML = alle_cellen[i].innerHTML.replace('contentEditable=true','contentEditable=false temp');
        }
    }   
}

function endDrag()  
{   
    foo.document.body.innerHTML = foo.document.body.innerHTML.split('contentEditable=false temp').join('contentEditable=true');
}

</script>
</head>
<body>
    <iframe name="foo" width="800" height="300" src="test.htm">
</iframe>
</body>
</html>

[test.htm]

code:

<table border="1" width="700" height="400">
<tr>
    <td width="300" valign="top"><div contentEditable=true><p id="1" contentEditable=false style="width:200px;height:50px;background:#F2F2F2" onDragStart="parent.startDrag(this)" onDragEnd="parent.endDrag(this)">Vast Element</p></div></td>
    <td width="100" valign="top"><div contentEditable=true></div></td>
    <td width="200" valign="top"><div contentEditable=true></div></td>
</tr>
</table>

In dit voorbeeld kan je het vaste element wel naar de rechter cel slepen, maar niet naar de linkercel, aangezien deze te klein is. Wanneer ik het gesleepte element loslaat (ondragend) zet hij netjes alle contentEditables weer goed. Probleem is dat hij het gesleepte dus gekopieerd heeft. Zie ik wat doms over het hoofd? Het vreemde is dat tijdens het event window.event niet beschikbaar is. Is het uberhaupt wel mogelijk wat ik wil?

woensdag 23 april 2003 13:45

Acties:

Mickman

Heb je een link naar een demo, waar we het probleem kunnen zien. Ik wordt niet echt veel wijzer uit je functionele eisen.

woensdag 23 april 2003 13:54

Acties:

André

Analytics dude

Als ik het volgende in de adresbalk zet zie ik inderdaad dat het element gekopieerd word en niet verplaatst:

JavaScript:

1	javascript:alert(top.foo.document.body.innerHTML)

Misschien is het zo dat kopieren de standaard actie is ipv verplaatsen. Dan zul je dus zelf een verwijder functie moeten maken die het originele element verwijderd.

woensdag 23 april 2003 14:08

Acties:

Verwijderd

Topicstarter

De demo staat hierboven. Even twee bestandjes copy pasten en je kan het zien.

De standaard actie is moven en niet kopieren. Als ik namelijk endDrag verander in:

function endDrag
{
alert("iets");
}

Dan verplaatst hij wel gewoon en kopieert hij niet. Ik vermoed zo dat op het moment dat ik een element oppak en ga verplaatsen (onDragStart) dat er dan een soort pointer wordt gemaakt naar het originele element. (srcElement, wat ik dus niet kan aanspreken). Op ondragEnd wordt er wat met de data gedaan waar die pointer naar verwijst. Dus gaat het mis.

Als iemand een eenvoudige functie weet die het originele element verwijderd, dan hou ik me zwaar aanbevolen. Iig bedankt voor meedenken.

woensdag 23 april 2003 14:14

Acties:

André

Analytics dude

Komt het misschien omdat je de cel waarin het originele element staat ook "contenteditable = false temp" maakt. Daardoor kan het originele element niet verwijderd worden en maakt hij een kopie.

woensdag 23 april 2003 14:16

Acties:

Verwijderd

Topicstarter

Is op zich wel een goed idee, maar lijkt me niet. Ik maak die namelijk niet false, aangezien die niet kleiner is dan het vaste element. Alleen de middelste cel is kleiner en staat tijdelijk op false. Wat op zich heel mooi werkt, al zeg ik het zelf.

woensdag 23 april 2003 14:27

Acties:

André

Analytics dude

Ik weet het, vervang:

JavaScript:

1	foo.document.body.innerHTML = foo.document.body.innerHTML.split('contentEditable=false temp').join('contentEditable=true');

Door:

JavaScript:

1	setTimeout("foo.document.body.innerHTML = foo.document.body.innerHTML.split('contentEditable=false temp').join('contentEditable=true')", 1);

Waarom het dan wel werkt weet ik niet, maar het werkt.

woensdag 23 april 2003 14:45

Acties:

Verwijderd

Topicstarter

YES!!!!!!!!!!!!!!!!!!!!!!! DAT WAS HEM!!!!!! SUPERVET. Gisteren heb ik hier de hele dag mijn nek over zitten breken. Wel een vage oplossing, maar werken is werken denk ik dan maar.

Andre: Zwaar bedankt, ik sta bij je in het krijt. Als ik je ooit ergens mee kan helpen, dan hoor ik het wel he.

Hoe kan ik overigens de focus op het element houden hierna? Of ga ik dan te ver? haha

woensdag 23 april 2003 14:48

Acties:

André

Analytics dude

element.focus();

offtopic:
Ben ik nu officieel js goeroe?

woensdag 23 april 2003 16:05

Acties:

2

Kan beter met de functie setAttribute die ervoor bedoeld is om attributen te wijzigen. Dan weet je namelijk dat het na een browserupdate ook nog werkt.

woensdag 23 april 2003 16:10

Acties:

Verwijderd

Topicstarter

André: Zeker!

2: Hoe bedoel je precies? Ik kan hem met setAttribute namelijk niet op "false temp" zetten, wat ik wel wil, aangezien er ook een aantal op false staan, die altijd op false moeten staan.

woensdag 23 april 2003 23:46

Acties:

2

Weet je zeker dat dat niet kan

Want het werkt hier prima.