Archive:Skinning for Drag n Drop

NOTICE: This page describes an experimental feature that is not currently included in normal Kodi builds or the master code branch.

Allow File items to be dragged on any GUI Element

NOTE: This is experimental and only available in my Drag and Drop Branch

You can allow a user to drag a list item onto any GUI element by specifying an ondrop action like:

   <ondrop>ACTION</ondrop>

See here for a list of available Actions If you want to allow specific items to be dropable on that GUI Element, you can use the 'condition' Attribute

   <ondrop condition='dragndrop.item.isVideo'>ACTION</ondrop>

NOTE: with any GUI Element, I mean any, except Containers (Lists, Panels et. al.).

Auto Execute an Action while hovering

NOTE: This is experimental and only available in my Drag and Drop Branch

Still thinking about all the implications, so this isn't set in stone. Will add it later.

Prepare Containers to be dropable or reorderable

NOTE: This is experimental and only available in my Drag and Drop Branch

First, off, you don't have to do anything. In that case, when the user drags an item, it will be automatically added/moved and gives the user direct feedback.

Using a DragHint

NOTE: This is experimental and only available in my Drag and Drop Branch

If that's not the behavior you want, you can use a Drag Hint. That DragHint will be a dummy GUI Element shown, where the dragged item will finally placed.

 <control type="panel" id="451">
    <!- - YOUR USUAL LIST STUFF - ->
    <draghint> 
      <control type="image">
        <left>0</left>
        <top>-8</top> 
        <width>640</width>
        <height>16</height>
        <texture>CalibrateSubtitles.png</texture> 
        <aspectratio>stretch</aspectratio>
      </control>
    </draghint>
 </control>

Skin Labels available during drag & drop

NOTE: This is experimental and only available in my Drag and Drop Branch

dragging	True when the user is currently dragging sth.
listitem.isDragged	True when the user is currently dragging this item
listitem.isDropped	True when the user is currently dropping this item. The difference to isDragged is, that isDragged is true in the list where the dragging began, and isDropped is true on the item where it will be placed. For in-list-reordering both will be true
dragndrop.hovered.id	The id of the GUI element that is currently hovered and has a valid <ondrop> action for the dragged item. Might be 0 if the element has no ID, or the user doesn't hover a dropable element.
dragndrop.item.{FOO}	Gives you access to the dragged item, where {FOO} is the same as in listitem.{FOO}.

EXAMPLE: Show the dragged Item under the Mouse

Add the following to your Pointer.xml and you skin will now show the dragged items icon (or label as a fallback), as well as a little icon when hovering the button with the id 3003

 <control type="group" id="3">
   <control type="image">
     <description>Pointer Drag Image</description>
     <left>0</left>
     <top>0</top>
     <width>32</width>
     <height>32</height>
     <texture>pointer-focus-drag.png</texture>
   </control>
   <control type="image">
     <visible>!isempty(dragndrop.item.icon)</visible>
     <left>20</left>
     <top>20</top>
     <width>64</width>
     <height>64</height>
     <aspectratio align="center">keep</aspectratio>
     <fadetime>IconCrossfadeTime</fadetime>
     <texture>$INFO[dragndrop.item.icon]</texture>
     <bordertexture border="8">ThumbShadow.png</bordertexture>
     <bordersize>8</bordersize>
   </control>
   <control type="label">
     <visible>isempty(dragndrop.item.icon)</visible>
     <left>20</left>
     <top>20</top>
     <fadetime>IconCrossfadeTime</fadetime>
     <label>$INFO[dragndrop.item.label]</label>
   </control>
   <control type="image">
     <visible>dragndrop.hovered.id(3003)</visible>
     <left>60</left>
     <top>60</top>
     <width>16</width>
     <height>16</height>
     <texture>add-icon.png</texture>
   </control>
 </control>

I'm pretty sure any skinner could improve on that example, so feel free to do so ;)