ukijs blog

making web apps with uki

Drag and drop in uki

with 11 comments

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

Written by voloko

March 16, 2010 at 11:20 am

Posted in Uncategorized

Tagged with , , , ,

11 Responses

Subscribe to comments with RSS.

  1. […] 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 […]

  2. […] Drag and Drop With Simple UI Kit […]

  3. […] 基于 Simple UI Kit 的拖放 […]

  4. […] 基于 Simple UI Kit 的拖放 […]

  5. […] 基于 Simple UI Kit 的拖放 […]

  6. […] 基于 Simple UI Kit 的拖放 […]

  7. […] 基于 Simple UI Kit 的拖放 […]

  8. […] 基于 Simple UI Kit 的拖放 […]

  9. […] 基于 Simple UI Kit 的拖放 […]

  10. […] Drag and Drop With Simple UI Kit […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: