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/