WN

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)

robincox 2010-08-20 14:44

jQuery sortable
 
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?

KarlRoos 2010-08-20 15:36

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

hnn 2010-08-20 15:41

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 :)

robincox 2010-08-20 16:42

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.

dAEk 2010-08-20 19:58

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

hnn 2010-08-20 20:02

http://trac.visualjquery.com/

dAEk 2010-08-20 20:23

Citat:

Ursprungligen postat av hnn (Inlägg 20366229)

Hur tänkte du nu?

robincox 2010-08-20 21:20

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.

robincox 2010-08-20 21:27

.removeAttr()
 
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/

rhdf 2010-08-20 22:09

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

robincox 2010-08-20 22:41

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 :)

dAEk 2010-08-21 13:29

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 +")");
                                }
                        }
                }
        });
});


dAEk 2010-08-24 19:45

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");

robincox 2010-08-30 12:56

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

dAEk 2010-08-30 21:13

Citat:

Ursprungligen postat av robincox (Inlägg 20367274)
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

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.


Alla tider är GMT +2. Klockan är nu 08:19.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson