ukijs blog

Ukijs 0.1.0 released. Grab it at http://static.ukijs.org/pkg/0.1.0/uki.js

What’s new

w3c drag and drop support. Uki views now support w3c drag and drop events, like ondragstart or drop. And it supports them in all browsers. See the screencast, demo and read the blog post to get more info on this feature.

multiselect attribute for List. All lists and tables now support selecting multiple rows with both keyboard and mouse (holding Shift or Ctrl/Option key). See the demo.

steps in slider. Slider supports stepped drag and drop with values attribute.

uki({ view: 'Slider', value: [1, 2, 3, 4, 5] ... }

will produce a slider with 5 separate handle positions. See the demo.

event wrapper. All events now wrapped into uki.dom.Event class. This means that you now longer need e.domEvent to access native event properties. Plus all events now have e.preventDefault() and e.stopPropagation() in all browsers.

long views renamed. Views with ‘Horizontal’ and ‘Vertical’ in name were renamed to shorter version with ‘H’ and ‘V’. So ‘HorizontalFlow’ is now ‘HFlow’.

And of course lot’s of minor tweaks and fixes.

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