Please accept YouTube cookies to play this video. By accepting you will be accessing content from YouTube, a service provided by an external third party.
If you accept this notice, your choice will be saved and the page will refresh.
this drag & drop script can be used to rearrange anything with Kontakt. With up to 16 draggable elements.
It can easily be customized by adjusting a few parameters like size, position, amount of draggable elements. The draggables can be skinned with custom images as well (see video).
All draggable positions are updated into an array which can be used to reorder anything with Kontakt. Read more below under API
Recommended
Sublime 3 (if you want to work with the sublime short-syntax code, which is included in the DL)
Download all files to this article
- NKI file [Kontakt 5]: open script tab & resource container
- NKI file [Kontakt 6]: open script tab & resource container
- ksp script file for sublime 3
- ksp script file for kontakt 5
- ksp script file for kontakt 6
DLC: additional CONTENT
(reARRANGE FX)
License:
MIT International License.
https://blog.yummybeats.com/license-text-mit/
You may use this script, modify it, build upon it, as you like (also commercially), as long as you keep all credits within the code visible to others. You may put them into an extra open script tab or inside an about section of your instrument. If you would like to remove the credits or publish them somewhere else, please contact us
YOU MAY NOT commercialize, share, distribute, whatsoever the included image files and other media (© 2023 all rights reserved).
Content
-
important notes
-
DOCS :: SETUP GUIDE
-
DOCS :: adjustable vars
-
DOCS :: API / output data & usage
-
TUTORIAL :: Full Script
-
TUTORIAL :: on init explained (only relevant parts)
-
TUTORIAL :: on ui_control explained
Important Notes
These docs explain the code on the basis of the Kontakt Script versions supplied with the download.
If you are working with sublime it is recommended to use the sublime version, also supplied with the download.
The sublime version works for both, Kontakt 5 & 6. Simply set the preferred Kontakt version at the top of the script, before compiling it.
For the draggables both the words “element” and “cursor” are used across these docs.
Setup Guide
- copy the whole code from inside the on init into your on init. At best somewhere below your code.
But don’t copy the “on init” “end on” again - copy the whole code from below the on init somewhere below your on init.
- Put the copyright notice at the very top of your code (or into an extra open script tab or into an about section of your instrument).
See this demo:
{##################################################################################### "YummyBeat's - KSP Drag & Drop" script, licensed under the MIT License .... .... Please copy the whole copyright notice here! #####################################################################################} on init {### YOUR CODE ###} {YUMMYBEAT'S KSP DRAG & DROP SCRIPT} end on {### YOUR CODE ### } {YUMMYBEAT'S KSP DRAG & DROP SCRIPT} on ui_control (?dd_area) {.....} end on
Adjustable Vars (Kontakt6 & Kontakt5)
{ SET GLOBAL UI } declare $UI_WIDTH := 1000 {set UI width: min width = 632; max width = 1000 } declare $UI_HEIGHT := 540 {set UI height: max height = 540 } declare @WALLPAPER @WALLPAPER := "wp" {set background wallpaper (image name w/o file extension) } { SET DRAG & DROP AREA } declare const $NUM_CURSOR := 8 {set the amount of total cursors; max = 16 } declare const $DD_AREA_WIDTH := 480 {set the drop down area width } declare const $DD_AREA_HEIGHT := 64 {set the drop down area height (this should equal the cursor image height) } declare const $DD_AREA_ALIGN := 1 {align the drag & drop area: 1 = center; 0 = left } declare const $DD_AREA_POS_X := 0 {left indent; set to 0 when align = center } declare const $DD_AREA_POS_Y := 241 {position the drag & drop area vertically } declare $RELEASE_TIME := 200 {Kontakt 5 only: wait time until mouse release code is executed } { SET CURSOR IMAGES } declare !cursor_img[$NUM_CURSOR] !cursor_img[0] := "cursor_0" {set individual image for cursor 1: enter image file name w/o file extension } !cursor_img[1] := "cursor_1" {set individual image for cursor 2: enter image file name w/o file extension } !cursor_img[2] := "cursor_2" {set individual image for cursor 3: enter image file name w/o file extension } !cursor_img[3] := "cursor_3" { ... } !cursor_img[4] := "cursor_4" !cursor_img[5] := "cursor_5" !cursor_img[6] := "cursor_6" !cursor_img[7] := "cursor_7" { !cursor_img[8] := "" !cursor_img[9] := "" !cursor_img[10] := "" !cursor_img[11] := "" !cursor_img[12] := "" !cursor_img[13] := "" !cursor_img[14] := "" !cursor_img[15] := "" } {uncomment if using more than 8 cursors}
simply refer to the comments nearby or watch the video.
API :: Output Data and Usage

$pos
holds the current position of the selected cursor
message($pos) //outputs 2
$this_cursor
holds the current selected cursor index
message($this_cursor) //outputs 6
%cursor_index
this array holds all cursor indices (the cursor IDs) subjected to their current positions. Where the array keys represent the positions and the values the cursor indices (see example below).
So if we wanna know which cursor is currently at which position we can do:
// THIS IS REFERRING TO THE CURSOR POSITIONS FROM THE IMAGE ABOVE //position 0 message(%cursor_index[0]) //outputs 3 //position 1 message(%cursor_index[1]) //outputs 5 //position 2 message(%cursor_index[2]) //outputs 6 //position 3 message(%cursor_index[3]) //outputs 7 //position 4 message(%cursor_index[4]) //outputs 0 //position 5 message(%cursor_index[5]) //outputs 1 //position 6 message(%cursor_index[6]) //outputs 2 //position 7 message(%cursor_index[7]) //outputs 4
Example
All the values above will be updated whenever we move an element to a new position.
We can now use all the values to reorder anything we want.


Let’s move element four to the first position = Null position.
$pos
is 0 (before it was 4)
$this_cursor
stays 4 until we select another cursor.
%cursor_index
looks like this now:
%cursor_index[0] => 4
%cursor_index[1] => 0
%cursor_index[2] => 1
%cursor_index[3] => 2
%cursor_index[4] => 3
%cursor_index[5] => 5
%cursor_index[6] => 6
%cursor_index[7] => 7
Now we can iterate through the %cursor_index array and use its keys & values to reorder anything we want (see rearranging fx slots)
premium content
unlock the full article
including all downloads!
unlock premium content
Serge
Hi _ Please, how to show different controls after click ont the differents cursors ? This would be to bring up the effects parameters corresponding to each cursor, for example. Regards _YummyBeats
Hey, good point.maybe we could call a function inside the ddarea's on ui_control.
Via
$this_cursor
inside that function we can show the corresponding fx controls. Or hide all the other fx controls again.If you are already coding for kontakt 6 you could just show a whole panel which you have especially created for the single fx controls
I wasn't able to test this yet, though. I'm not sure right now if the on ui_control (or the function inside) already gets executed when only clicking on one of the cursors or if it requieres a curser movement.
Let me know. If it works I could write another article.