ukijs blog

As of 0.1 ukijs gets support for drag and drop events based on w3c d&d specification (dragstart, drag, dragstop, dragover, dragenter, dragleave, drop). So in new browsers (FF3.5+, latest webkits) uki will use native events thus allowing to drag items within and outside of the browser window. For the rest of the browser crowd (IE, Opera, previous FF) uki will emulate exactly the same behavior within browser.

Screencast: drag and drop with uki from Volodya Kolesnikov on Vimeo.

Events

To make view draggable you have to mark it with draggable attribute. All uki views support it:

uki({ view: 'List', draggable: true ... })

Then add the dragstart event:

uki('List').draggstart(function(e) {
    // set the data that will be dragged 
    e.dataTransfer.setData('text/plain', this.selectedRows().join('\n'));
    // set the drag feedback image (both uki views 
    // and simple dom nodes are allowed)
    e.dataTransfer.setDragImage(uki(
        { view: 'Label', rect: '100 20', anchors: 'left top', inset: '0 5',
          background: 'cssBox(border: 1px solid #CCC;background:#EEF)',
          text: this.selectedRows().length + ' rows' }
     ), 10, 10);
     // set allowed affect to 'copy', 'move' etc
     e.dataTransfer.effectAllowed = 'copy';
});

For the drop targets you need to add dragover and drop events:

uki('[name=target]')
    .dragover(function(e) {   // required
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy'; // same as effectAllowed
    })
    .dragenter(function(e) {  // optional
        this.text('enter');
    })
    .dragleave(function(e) {  // optional
        this.text('leave');
    })
    .drop(function(e) {
        alert(e.dataTransfer.getData('text/plain'))
    });

See the demo