WN - jQuery sortable

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - jQuery sortable (https://www.wn.se/forum/showthread.php?t=1043417)

Jag har precis funnit jQuerys fantastiska sortable funktion. Med den kan man sortera innehållet i en lista med "drag and drop".

Min fråga är, om man har listan full av länkar, kan man då "drag and drop" utan att bli skickad till den webbsida som href länkar till? Det borde ju gå om man håller ner musknappen och börjar dra länken eller har jag fel?

$( selector till länkarn).click(function(){
return false;
});

KarlRoos: Tror problemet är större än så. Man har nog en länk där för att man ska kunna klicka på den :)

Citat:

Ursprungligen postat av hnn (Inlägg 20366200)

KarlRoos: Tror problemet är större än så. Man har nog en länk där för att man ska kunna klicka på den :)

Exakt. Jag vill ju att man ska kunna klicka på länkarna och hamna på href destinationen om man vill det.
Oj... såg nu att jag råkade posta den här tråden i fel kategori, klientsidans teknologier ska det ju såklart vara.

jQuerys dokumentation är alltid en bra utgångspunkt. Den är väldigt bra och har exempel, ofta iaf. :)

http://docs.jquery.com/UI/Sortable#option-cancel

Citat:

Ursprungligen postat av hnn (Inlägg 20366229)

http://trac.visualjquery.com/

Hur tänkte du nu?

Vill inte hindra sortering

Citat:

Ursprungligen postat av dAEk (Inlägg 20366227)

jQuerys dokumentation är alltid en bra utgångspunkt. Den är väldigt bra och har exempel, ofta iaf. :)

http://docs.jquery.com/UI/Sortable#option-cancel

Det exemplet visar hur man förhindrar sorteringsfunktionen, det är inte vad jag är ute efter. Jag vill att href fortfarande ska funka om man släpper musknappen ovanför länken som vanligt "mouse up", men om man däremot drar länken till en annan position i listan så ska inte href aktiveras. Hoppas det var en någorlunda bra förklaring.

Jag tror att jag har kommit lösningen på spåret. Kanske kan man ta bort länkfunktionen på länken när man har börjat dra i den med .removeAttr(). Kolla på denna sida:

http://api.jquery.com/removeAttr/

du får peta dit nånting före länken som kan fungera som "handle"
tror det finns rätt bra demonstrerat här: http://jqueryui.com/demos/sortable/#option-handle

på mylinkstart.se så använde jag en bild (länkens favicon) som handle
typ såhär
<img src="http://www.google.com/s2/favicons?domain=www.facebook.com" alt="" class="favicon" />
<a href="http://www.facebook.com" title="Facebook" rel="nofollow">Facebook</a>

och
$("ul.linklist").sortable({ connectWith: 'ul', handle: '.favicon' });

Citat:

Ursprungligen postat av rhdf (Inlägg 20366243)

Jo, jag har varit inne på det men problemet är att handlern tar plats. Men det är sant, fixar jag det inte på något annat sätt så blir det en handler. Tack för länken, den är en viktig plan b :)

Citat:

Ursprungligen postat av robincox (Inlägg 20366237)

Då tolkade jag dig rätt så fel från början, sorry.

För mig funkar följande kod i Chrome men inte i några andra webbläsare. Det som inte funkar är klickanropet. Flödet verkar stämma då det loggas rätt saker men click-triggern vill inte ge med sig. Uppenbarligen har jag missat något men jag kan inte se vad det skulle vara.

Här har du en start iaf. Det är ihophaffsat lite snabbt så det kan finnas buggar och optimeringsbehov.

Kod:

$(document).ready(function() {



        if (window.console === undefined) {

                $("body").append('<div id="logger"></div>');

                window.console = {

                        log : function(message) {

                                $("#logger").append(message + "<br>");

                        }

                };

        }



        $("#sortable a").mousedown(function() {

                $(this).data("doClick", true);

                console.log(this.href);

        });



        $("#sortable").sortable({ 

                tolerance: 'pointer', 

                start: function(event, ui) {

                        $(ui.item).data("indexBefore", $(ui.item).parent().children().index($(ui.item)));

                },

                stop: function(event, ui) {

                        if ($(ui.item).find("a").data("doClick") === true) {

                        

                                console.log("index changed?");

                                

                                var indexBefore = $(ui.item).data("indexBefore");

                                var currentIndex = $(ui.item).parent().children().index($(ui.item));

                                

                                if (indexBefore === currentIndex) {

                                        console.log("index was not changed, trigger click");

                                        console.log($(ui.item).find("a").attr("href"));

                                        

                                        $(ui.item).find("a").trigger("click");

                                } else {

                                        console.log("index changed (before: " + indexBefore +", after: " + currentIndex +")");

                                }

                        }

                }

        });

});

Jag kommer nog inte kunna pilla nåt med det här förens i helgen och det är bara kanske.

Är det inte viktigt att det faktiskt körs ett click-event skulle det funka att ange location.href istället:

Kod:

location.href = $(ui.item).find("a").attr("href");

Det gick enkelt!

Det gick väldigt enkelt. Länkar som man kan sortera med sortable länkar vid mouse up men är sorterbara om man klickar, håller nere musknappen och drar i dem, då länkar de inte. Så summan av kardemumman är man behöver inte skriva en enda rad med extra kod :D

Citat:

Ursprungligen postat av robincox (Inlägg 20367274)

Bra att det löste sig men det varr inte direkt glasklart att det var så du ville att det skulle fungera om man läser inläggen. Men som sagt, skönt att det löste sig iaf.