Drag and drop med jQuery UI

Sammanfattar i denna posten de mest grundläggande bitarna i drag and drop med hjälp av jQuery UI.

Först så hämtar vi hem senaste jQuery och jQuery UI biblioteken och länkar dessa i html -dokumentet vi tänker jobba i på exempelvis följande sätt.

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.min.js"></script>

Var noga med att du har bockat i ”Draggable” under ”Interactions” då du laddar hem jQuery UI scriptet.

Skapa nu ett div -element i dokumentet med följande stilregler:

#drag
{
    width:
        90px;

    height:
        100px;

    background:
        #f00;
}

För att du nu ska kunna göra detta flyttbart med drag and drop så använder du följande javascript:

$( '#drag' ).draggable();

Det ska räcka för att du ska ha en liten röd fyrkant i din webbläsare som du nu kan flytta runt.

Inställningar

Funktionen daggable tar ett inställnings -objekt som parameter.

$( '#drag' ).draggable(
    {
        disabled:
            true,

        addClasses:
            false
    });

På detta viset kan vi sätta flera inställningar i initieringsprocessen eller om vi vill förändra något därefter. Vill vi istället endast göra en förändring så kan vi göra på följande vis:

$( '.selector' ).draggable( 'option', 'disabled', true );

För att läsa av värdena på inställningarna så används följande:

var disabled = $( ".selector" ).draggable( "option", "disabled" );

Nedan listar jag diverse inställningar vi kan leka med.

Attributnamn Typ Förklaring
disabled Boolean Stänger av eller aktiverar drag and drop funktionaliteten för elementen/ementet ifråga.
addClasses Boolean När du drar dit element med musen så får den en klass som heter ”ui-draggable”. Med detta attributet kan du förhindra detta.
appendTo String Då man använder sig av en hjälpare i drag and drop sammanhanget så berättar detta elementet var i DOM denna hjälpare ska fästas. Värdet ska således vara en giltig jQuery selektor.
axis String Värdet kan vara antingen ett x eller ett y. Attributet används om man vill begränsa möjligheten för klienten att röra elementet på mer än en axis.
cancel String Man kan se detta attributet som en möjlighet till att lägga till undantag till selektorn vi först fäste funktionen på. Vi kanske inte vill att alla element som först specificerades ska vara drag and drop.
connectToSortable String Om man vill att elementet ska kunna släppas på en sorterbar lista. Värdet ska vara en giltig jQuery selektor.
containment String | Array Om vi vill begränsa möjligheten för klienten att röra elementet utanför ett visst område så kan vi specificera det med detta attributet. Värdet kan vara en selektor eller ett fält som man specificerar en hage i; 
[ x1, y1, x2, y2 ].
cursor String Vilken muspekare man vill ha då själva drag and drop händelsen är aktiv.
cursorAt Object Specificerar ett offset -värde förhållande till musen då klienten drar elementet;
{ top, left, right, bottom }.
delay Integer En fördröjning uttryckt i millisekunder innan drag and drop initieras efter att klienten har börjat dra elementet.
distance Integer En fördröjning uttryckt i pixlar innan drag and drop initieras efter att klienten har börjat dra elementet.
grid Array Ett rutnät som elementet kan fästas vid.
[ x, y ]
handle String  
helper String | Function Ett element som dras istället för huvud elementet. Om en funktion specificeras måste denna returnera ett eller flera element.
iframeFix Boolean | String Iframes kan sno åt sig musens aktiviteter under tiden du drar. Detta attributet fixar sådana eventuella problem. Om en selektor är angiven så motverkas endast problemet på de träffade elementen.
opacity Float Genomskinligheten på eventuell hjälpare.
refreshPositions Boolean  
revert Boolean Gör att elementet faller tillbaka till sin ursprungliga plats efter att klienten har släppt elementet.
revertDuration Integer Uttrycker i millisekunder hur lång tid animationen i revert ska ta.
scope String Kan förklaras som en namnrymd eller ett gruppnamn. Hjälpsamt om man vill specificera olika drop zoner för olika flyttbara element.
scroll Boolean Tillåter att förälderelementet scrollas automatiskt då man drar elementet utanför dess område.
scrollSensitivity Integer Hur långt ifrån kantens gräns man ska vara för att elementet ska scrollas.
scrollSpeed Integer Hur snabbt elementet ska scrollas.
snap Boolean | String Fäster det flyttbara elementet vid andra element. Om en selektor är angiven så fästes elementet endast vid de specificerade i selektorn.
snapMode String Bestämmer hur elementet ska fästas.
Följande värden är tillåtna: ”inner”, ”outer” och ”both”
snapTolerance Integer Hur nära fästningen ska ske.
stack String Tillåter att elementet klienten drar kommer högst upp.
zIndex Integer Hjälparens z-index.

Bugg

Upptäckte en bugg som gjorde att man inte kunde scrolla ner på sidan utan att det balla ur. Där blev enkelt förklarat ett felaktigt offset -värde. Jag löste tillslut detta med att ta bort följande stilregel:

body
{
    overflow-y:
        scroll;
}

Problemet är bättre förklarat i ett inlägg jag hittade på jQuery forumet: https://forum.jquery.com/topic/ff-draggable-issue-when-window-scrolls

Länkar

http://jqueryui.com/demos/draggable/
http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/