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)

Citat:

Ursprungligen postat av rhdf (Inlägg 20366243)

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' });

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)

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.

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.