[CSS/JS] Image dragdrop met behoud van textflow

[gvanh]

Na flink zoeken op google en uiteraard hier in het forum heb ik nog geen oplossing voor m'n "uitdaging".

Wat ik zou willen:
In een pagina afbeeldingen middels drag&drop verplaatsen, waarbij de afbeelding na de verplaatsing wordt teruggeplaatst in de "tekstflow", zodat de tekst er omheen loopt. Deze site illustreert goed het verplaatsen d.m.v. drag&drop ... dat is goed te doen met m'n huidige kennis.

Alleen wordt in dat systeem de afbeelding over de tekst heen geplaatst (logisch, want "position:absolute"). Nu zoek ik dus een manier om de tekstomloop te herstellen.

Is er wellicht iemand die hierover ideeën heeft of dit wel 'ns ergens (in DHTML/JavaScript) heeft gezien?

[Verwijderd]

tijdens het draggen moet je idd absoluut positioneren, bij het droppen zal je dit moeten opheffen en ook het element daadwerkelijk in de DOM verplaatsen (het uitzoeken waarheen is nog een klus waar ik zo ff geen antwoord op weet). Vervolgens de position weer op relative zetten en eventueel een float geven ook.

[Verwijderd]

Lijkt me niet echt haalbaar. Als je wil floaten, dan moet je nog met margins gaan werken op je afbeelding om exact te positioneren waar je gaat droppen. Het enige wat ik me kan voorstellen, is dat je hem echt als afbeelding tussen de tekst plant, en dat je bij een drop gaat kijken tussen welke letters je de drop deed en hem daar tussen planten. Dan moet je alleen nog gaan kijken hoe je de cursorpositie gaat verkrijgen en dat alleen is zonder focus op je tekst al een bitch.

Je kunt natuurlijk altijd bij benadering de afbeelding zo gaan positioneren met een timer totdat je het gewenste gebied hebt, maar het resultaat daarvan is een onrustig beeld.

[gvanh]

Ja ... precies. Maar er is geen mogelijkheid om "met een trucje" de position op absolute te houden en toch de afbeelding in de textflow te houden?

Zo niet ... dan zou je moeten gaan kijken in welke container/DOM object de afbeelding is ge-dropt. Dat moet nog wel lukken. Maar stel je de afbeelding vervolgens midden in een tekst-alinea wil plaatsen, dan moet je dus gaan uitvinden waar je de tekst moet splitten ... dat lijkt me erg lastig.

Mocht dat wel (hoe dan ook) zijn gelukt, dan kun je op de plaats waar je de Node van de afbeelding hebt toegevoegd gaan bepalen of je beter links of rechts kan "floaten", om dichterbij de werkelijk opgegeven positie uit te komen. En dan met marges het verschil wegnemen tussen opgegeven positie en werkelijke positie.

Klinkt dat logisch?

Meest lastige zal dus zijn om te bepalen waar je het image DOM object in de bestaande structuur moet toevoegen om het dichtst bij de opgegeven locatie terecht te komen.

[Verwijderd]

je kan je ook beperken tot voor of na een paragraaf, of van tevoren paragrafen opsplitsen zodat je zeg maar al posities creert, dan hoef je iig al geen elementen te gaan splitsen (zou ook even niet weten hoe je dat moet doen).

Als je vervolgens aan het draggen bent, kan je het element wel uitlezen waar je boven hangt en bij het droppen je element daar voor planten.

refinement stap is tijdens het draggen kijken waar je ergens in het element zit waar je overheen dragt, en dan afhankelijk daarvan ervoor of erachter droppen.

Ik heb wel eens zoiets gedaan, maar kan even niet meer vinden of en waar ik dat nog heb

ik zou zeggen: ga eens proberen, vind het wel leuk om mee te denken

[ Voor 6% gewijzigd door Verwijderd op 09-03-2006 09:48 ]

[gvanh]

M'n eerste kleine probeerseltje: Hier.

Maar werkt voor nu even alleen in Firefox/Mozilla.

De groene tekst heb ik een <span> tag gegeven. Wanneer je op het linkje bovenaan klikt (positioneer vliegtuig) ... dan wordt de afbeelding van het vliegtuig neergezet op de positie van de <span> (maar nog steeds absoluut)

Wat heb je daaraan?

Als je de positie van een <span> ten opzichte van de hele pagina kan bepalen, dan weet je dus waar inline objecten zich bevinden. Dan zou je theoretisch alle woorden in een bepaalde alinea een eigen <span> tag kunnen geven. Als je dan alle <span> één voor één afloopt, dan weet je welke het dichtst bij je gewenste positie zit en dan ram je dus dáár je afbeelding voor.

Is dat wat?

[Verwijderd]

ja, je zou onload per zoveel woorden (ongeveer zoveel als op een regel passen) je bende kunnen ophakken in allemaal spans

de positie van je spans uitlezen hoeft niet, je hoeft alleen uit het (onmousemove) event te halen welk element het event afvuurde, dat is dan de span waar je boven zit. Vervolgens zet je hem daar voor

extra idee: tijdens het draggen al een hulp elementje steeds in de dom zetten op de plaats van de span waar je overheen gaat, die al float eigenschappen meegeven, zodat je een lijntje kan laten zien waar ie terecht gaat komen. Als je de boel loslaat verwijder je die weer.

edit:
dude: gooi je testoutput even naar window.status ofzo (of naar een console div) ipv naar een alert onmousemove="alert('iets')" is geen goed idee

[ Voor 65% gewijzigd door Verwijderd op 09-03-2006 10:18 ]

[gvanh]

Haha ... ja ... ik heb een aparte manier van debuggen ;-) Soms wil ik gewoon even kijken wat er opgepakt wordt op een bepaald moment.

Hoe dan ook ... nu een heel simpele drag/drop voor elkaar voor het plaatje.

Vervelende is alleen (zie window.status) dat zowel bij mousemove als bij mouseup events de afbeelding zelf wordt opgegeven als eventSrc. En dus niet het onderliggende DOM object.

Of kan ik die op een andere manier achterhalen?

[Verwijderd]

als je toch dynamisch spans gaat maken, kan je ze ook allemaal een onmouseover (of -move) event meegeven: <span onmouseover="somethingIsDraggingOver(this)">

[gvanh]

Helaas werkt de mouseover van zo'n item niet als ik er met een plaatje overheen sleep ... hij wordt dan niet getriggered. Ik moet het dus waarschijnlijk uit m'n mouseup gaan halen.

Nee... mouseup wordt natuurlijk ook getriggered door de afbeelding.

Hoe krijg ik dan het object wat ik wil?

[ Voor 27% gewijzigd door gvanh op 09-03-2006 10:56 ]

[gvanh]

Doordat de afbeelding rondgesleept wordt over de pagina, wordt er geen "mouseover" of "mouseup" event gefired vanuit het document.

Met behulp van mouseover kan ik dus niet achterhalen op welk DOM object de afbeelding wordt neergezet. Of zie ik iets over het hoofd? (Wellicht dat het kan met het W3C event model, maar het moet natuurlijk cross-browser werken)

Misschien kan ik wél met behulp van de X en Y positie van de muis achterhalen welk DOM object zich op een bepaalde positie in de document body bevindt ... maar hoe zou ik dat moeten aanpakken?

[Verwijderd]

als je nu tijdens het slapen het plaatje onder de muis hangt, dan zit ie er niet voor. Dus zeg maar:

code:

dragObj.style.left = msx+'px';
dragObj.style.top = (msy+10)+'px';

[Verwijderd]

Je kunt dat crossbrowser, niet ophalen en je zult dus zelf objecten moeten gaan zoeken. IE heeft een eigen methode, iets alla getObjectAtPositionXY voor zulke zaken, als je dat wilt gebruiken.

[gvanh]

Hmmm ... over die laatste kan ik niets vinden. Afbeelding net iets onder de muiscursor hangen vind ik weer enigszins brak. Dat tast de "feel" wel erg aan. Dan krijg je zo'n verspringend ding als je er op klikt ... word ik zelf erg ongelukkig van.

[Verwijderd]

1 lunchpauze verder:

http://www.rikkertkoppes.com/tests/got/dragfloat.htm

[gvanh]

heel nice!

Ben zelf momenteel nog steeds bezig met een eigen functie getElementByPosition(x, y)

Die moet de beste "match" vinden voor een DOM object op de gegeven x en y positie.

[gvanh]

Volgens mij doet hij het inmiddels heel aardig (vooral in Internet Explorer):

http://cms.thirdwave.nl/hopla.php

Lastigste was inderdaad de functie "getElementByPosition()" ... het nageslacht bij deze:

JavaScript:

    /**
     * Find the object that best matches the position given by the posX and posY
     * 
     * @author R.J.T. de Vries <[e-mail]>
     * @param   integer     posX
     * @param   integer     posY
     * @return  mixed           DOM object found or false on failure
     */
    document.getElementByPosition = function(posX, posY, parentObj) {
        
        if ( !is_object(parentObj) ) var parentObj = document.body;
        
        if ( !parentObj.childNodes || !parentObj.childNodes.length ) return parentObj;
        
        for ( i = 0; i < parentObj.childNodes.length; i++ ) {
        
            if ( inObjRange(parentObj.childNodes[i], posX, posY) )
            
                return document.getElementByPosition(posX, posY, parentObj.childNodes[i]);
        
        } // for()
        
        return parentObj;
    
    } // getElementByPosition()
    
    /**
     * Are given x and y positions in the range of the boundary of the given DOM object?
     * 
     * @author R.J.T. de Vries <[e-mail]>
     * @param       object      obj         object to use for range
     * @param   integer     posX
     * @param   integer     posY
     * @return  boolean                     true if in range, false if not
     */
    function inObjRange(obj, posX, posY) {
    
        var iLeft = getPosX(obj);
        
        var iTop = getPosY(obj);
        
        var iRight = iLeft + getWidth(obj);
        
        var iBottom = iTop + getHeight(obj);

        return (posX > iLeft && posX < iRight && posY > iTop && posY < iBottom) ? true : false;
    
    } // inObjRange()

[gvanh]

Nu krijg ik het niet voor elkaar om te berekenen hoeveel marge een paragraaf heeft. Daardoor ... wanneer je tussen twee paragrafen de afbeelding "dropt" ... dan wordt het "body" element gevonden op de aangegeven positie. En dat klopt dan ook ... want tussen twee paragrafen zit een marge.

Hoe zou ik dit kunnen oplossen? Ik heb nog niet kunnen achterhalen hoe je de "default" marge van bepaalde elementen kunt achterhalen, zoals de P tag. Via bijvoorbeeld het "currentStyle" object krijg ik alleen maar van Internet Explorer terug dat de waarde van de marge "auto" is ... en daar heb ik natuurlijk nog helemaal geen kont aan.

Iemand ideeen? Ik ben nu zover gekomen ... zonde om nu op te geven.

Alvast weer dank!