voloko/dnd_demo.html

## dnd_demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
  <title> Drag and Drop</title>
</head>
<body>

      <style>body, html { margin: 0; padding: 0; };</style>
      <div id="draggable" draggable="true"  unselectable="unselectable"
          style="position:absolute;left:600px;top:50px;width:100px;height:100px;
                 line-height:100px;font-size:18px;background:#CCF;font-family:sans-serif;
                 text-align:center;-webkit-user-drag:element;-webkit-user-select:none;
                 -moz-user-select:none">
          draggable
      </div>
      <script src="http://static.ukijs.org/pkg/0.1.0a1/uki.js"></script>
      <script type="text/javascript">
            uki([
                { view: 'ScrollableList', rect: '0 0 300 600', anchors: 'left top bottom',
                    id: 'source', textSelectable: false, multiselect: true, draggable: true },
                { view: 'Label', rect: '350 50 200 200', anchors: 'left top', text: 'drop target',
                    style: { fontSize: '25px', textAlign: 'center' },
                    background: 'cssBox(border:2px dashed #CCC; background:#EEE)', name: 'target' },
                { view: 'Label', rect: '350 300 200 200', anchors: 'left top', text: 'drop target',
                    style: { fontSize: '25px', textAlign: 'center' },
                    background: 'cssBox(border:2px dashed #CCC; background:#EEE)', name: 'target' }
            ]).attachTo(window, '1000 600');

            var data = [];
            for (var i=0; i < 8000; i++) {
                data[i] = 'Row ' + Math.random();
            };

            uki('#source List')
                .data(data)
                .dragstart(function(e) {
                    e.dataTransfer.setData('text/plain', this.selectedRows().join('\n'));
                    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);
                    e.dataTransfer.effectAllowed = 'copy';
                });

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

            uki.dom.bind(document.getElementById('draggable'), 'dragstart', function(e) {
                e.dataTransfer.setData('text/plain', 'test');
                e.dataTransfer.setDragImage(uki.createElement('div', 'width:20px;height:20px;background:blue'));
                e.dataTransfer.effectAllowed = 'copy';
            });
      </script>
</body>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	<head>
	<title> Drag and Drop</title>
	</head>
	<body>

	<style>body, html { margin: 0; padding: 0; };</style>
	<div id="draggable" draggable="true" unselectable="unselectable"
	style="position:absolute;left:600px;top:50px;width:100px;height:100px;
	line-height:100px;font-size:18px;background:#CCF;font-family:sans-serif;
	text-align:center;-webkit-user-drag:element;-webkit-user-select:none;
	-moz-user-select:none">
	draggable
	</div>
	<script src="http://static.ukijs.org/pkg/0.1.0a1/uki.js"></script>
	<script type="text/javascript">
	uki([
	{ view: 'ScrollableList', rect: '0 0 300 600', anchors: 'left top bottom',
	id: 'source', textSelectable: false, multiselect: true, draggable: true },
	{ view: 'Label', rect: '350 50 200 200', anchors: 'left top', text: 'drop target',
	style: { fontSize: '25px', textAlign: 'center' },
	background: 'cssBox(border:2px dashed #CCC; background:#EEE)', name: 'target' },
	{ view: 'Label', rect: '350 300 200 200', anchors: 'left top', text: 'drop target',
	style: { fontSize: '25px', textAlign: 'center' },
	background: 'cssBox(border:2px dashed #CCC; background:#EEE)', name: 'target' }
	]).attachTo(window, '1000 600');

	var data = [];
	for (var i=0; i < 8000; i++) {
	data[i] = 'Row ' + Math.random();
	};

	uki('#source List')
	.data(data)
	.dragstart(function(e) {
	e.dataTransfer.setData('text/plain', this.selectedRows().join('\n'));
	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);
	e.dataTransfer.effectAllowed = 'copy';
	});

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

	uki.dom.bind(document.getElementById('draggable'), 'dragstart', function(e) {
	e.dataTransfer.setData('text/plain', 'test');
	e.dataTransfer.setDragImage(uki.createElement('div', 'width:20px;height:20px;background:blue'));
	e.dataTransfer.effectAllowed = 'copy';
	});
	</script>
	</body>