290N/A<!
DOCTYPE HTML PUBLIC "-//
W3C//
DTD HTML 4.01//
EN" "
http://
www.w3.org/
TR/
html4/
strict.dtd">
290N/A <
title>YUI: DragDrop</
title>
290N/A <
link rel=
"stylesheet" type=
"text/css" href=
"http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css">
290N/A <
link rel=
"stylesheet" href=
"http://blog.davglass.com/files/yui/css/davglass.css" type=
"text/css">
290N/A <
style type=
"text/css" media=
"screen">
290N/A #drag, #drag2, #drag3, #drag4, #drag5, #drag6, #drag7, .drop {
395N/A border: 1px solid black;
290N/A background-color: #ccc;
290N/A border: 3px solid black;
290N/A #drag h2, #drag2 h2, #drag3 h2 {
3138N/A background-image: url( grid.png );
3237N/A .yui3-dd-drop-active-valid {
2852N/A .yui3-dd-drop-active-invalid {
2867N/A<
div id=
"drag7EL">I'm a custom proxy</
div>
2867N/A<
div id=
"davdoc" class=
"yui-t7">
2867N/A <
div id=
"hd"><
h1 id=
"header"><
a href=
"http://blog.davglass.com/">YUI: DragDrop 3.x</
a></
h1></
div>
3185N/A <
div id=
"drag"><
h2><
strong>Drag</
strong> Me</
h2>
395N/A <
option>Test Select</
option>
849N/A <
option selected>Test #2 Select</
option>
290N/A <
option>Test Select</
option>
395N/A <
option>Test Select</
option>
395N/A <
option>Test Select</
option>
395N/A <
div id=
"drag2"><
h2><
strong>Drag</
strong> <
a href=
"#">Me II</
a></
h2></
div>
395N/A <
div id=
"drag3"><
h2 class=
"one">X</
h2><
h2 class=
"two">X</
h2><
h2 class=
"three">X</
h2><
h2 class=
"four">X</
h2><
br><
br>Drag Me III</
div>
395N/A <
button id=
"test">Test Programmatic Move</
button><
br>
395N/A <
div id=
"drag4">Drag Me IV <
strong class=
"no">NO</
strong><
br><
strong class=
"yes">Yes</
strong></
div>
395N/A <
div id=
"drag5">Drag Me V <
strong class=
"no">NO</
strong><
br><
strong class=
"yes">Yes</
strong></
div>
395N/A <
div id=
"drag6">Drag Me VI <
strong class=
"no">NO</
strong><
br><
strong class=
"yes">Yes</
strong></
div>
395N/A <
div id=
"drag7">Drag Me VII <
strong class=
"no">NO</
strong><
br><
strong class=
"yes">Yes</
strong></
div>
395N/A <
iframe src=
"blank.htm" height=
"300" width=
"300"></
iframe>
395N/A <
option>Test Select</
option>
395N/A <
option selected>Test #2 Select</
option>
1231N/A <
option>Test Select</
option>
1557N/A <
option>Test Select</
option>
1903N/A <
option>Test Select</
option>
395N/A <
div id=
"ft"> </
div>
395N/A<
script type=
"text/javascript" src=
"../../build/yui/yui-debug.js?bust=<?php echo(
mktime());
?>"></
script>
395N/A<
script type=
"text/javascript" src=
"js/ddm-base.js?bust=<?php echo(
mktime());
?>"></
script>
395N/A<
script type=
"text/javascript" src=
"js/ddm.js?bust=<?php echo(
mktime());
?>"></
script>
3185N/A<
script type=
"text/javascript" src=
"js/ddm-drop.js?bust=<?php echo(
mktime());
?>"></
script>
3185N/A<
script type=
"text/javascript" src=
"js/drag.js?bust=<?php echo(
mktime());
?>"></
script>
3185N/A<
script type=
"text/javascript" src=
"js/drop.js?bust=<?php echo(
mktime());
?>"></
script>
395N/A<
script type=
"text/javascript" src=
"js/proxy.js?bust=<?php echo(
mktime());
?>"></
script>
290N/A<
script type=
"text/javascript" src=
"js/constrain.js?bust=<?php echo(
mktime());
?>"></
script>
290N/A<
script type=
"text/javascript" src=
"js/dd-plugin.js?bust=<?php echo(
mktime());
?>"></
script>
430N/A<
script type=
"text/javascript" src=
"js/dd-drop-plugin.js?bust=<?php echo(
mktime());
?>"></
script>
395N/A<
script type=
"text/javascript">
3139N/AYUI(yConfig).use('classnamemanager', 'event-synthetic', 'event-gestures', 'dd-ddm', 'dd-drag', 'dd-proxy', 'dd-constrain', 'yui-throttle', function(Y1) {
3139N/A Y1.DD.DDM._debugShim = true;
395N/A //dd4 = Y1.Base.create(Y1.DD.Proxy, [Y1.DD.DragConstrained], {
3139N/A myDD = Y1.Base.build(Y1.DD.Proxy, [Y1.DD.DragConstrained]);
2516N/A constrain2node: '#drag4Cont',
3139N/A Y1.get(window).on('scroll', function() {
3139N/A DOC_SCROLL_X = Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft);
3139N/A DOC_SCROLL_Y = Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
3139N/A Y1.DOM.docScrollX = function(node) {
3139N/A Y1.DOM.docScrollY = function(node) {
3139N/A //tickXArray: [10, 133, 245, 333, 388, 455, 488, 546, 667, 798, 892],
3139N/A //tickXArray: [133, 245, 333, 455, 488, 546, 667, 798, 892],
2516N/A //tickYArray: [249, 339, 459, 479, 579],
3139N/A //constrain2node: '#drag4Cont',
3139N/A dd4.plug(Y1.Plugin.DDConstrained, {
3139N/A constrain2node: '#drag4Cont',
3139N/A dd4.on('drag:end', function() {
3139N/A dd4.unplug(Y1.Plugin.DDProxy);
2516N/A dd4.plug(Y1.Plugin.DDProxy);
395N/A dd4.addInvalid('strong.no').on('drag:beforeMouseDown', function(e) {
2339N/A Y.log('beforeMouseDown::HALT');
395N/A //}).addInvalid('strong.no');
2339N/A }).addInvalid('strong.no');
2339N/A dd5.plug(Y1.Plugin.DDProxy, {
2690N/A borderStyle: '3px solid orange'
3094N/A //dd4.setHandle('#drag4Handle', true);
2693N/A }).plug(Y1.Plugin.DDProxy, {
2690N/A }).addInvalid('strong.no').on('drag:start', function() {
2339N/A this.get('dragNode').setStyles({
742N/A backgroundColor: 'blue'
742N/A }).set('innerHTML', 'Dragging Me!!')
3136N/A }).plug(Y1.Plugin.DDProxy, {
2688N/A }).addInvalid('strong.no').on('drag:start', function() {
2688N/AYUI(yConfig2).use('classnamemanager', 'dd-drop', 'dd-proxy', 'dd-plugin', 'dd-drop-plugin', 'yui-throttle', function(Y) {
2310N/A //alert(navigator.userAgent);
2852N/A//var Y = new YUI().use('dd-ddm', 'dd-drag');
1902N/A//Y.on('event:ready', function() {
2867N/A Y.DD.DDM._debugShim = true;
2867N/A //Y.DD.DDM.set('dragMode', 'strict');
1099N/A //Y.DD.DDM.useHash = false;
2867N/A //Y.DD.DDM.mode = Y.DD.DDM.INTERSECT;
2338N/A Y.DD.DDM.set('throttleTime', 50);
2046N/A Y.DD.DDM.on('drop:over', function(e) {
2223N/A //console.log('DDM:drop:over :: ', arguments);
2523N/A Y.DD.DDM.on('drag:drag', function(e) {
2523N/A //console.log('DDM:drag:drag :: ', e);
2523N/A Y.DD.DDM.on('drag:dropmiss', function(e) {
2523N/A //console.log('DDM:drag:dropmiss :: ', e);
2310N/A //Y.DD.DDM.set('multiDrop', false);
2310N/A Y.Event._nativeAdd = Y.Event.nativeAdd;
2310N/A Y.Event.nativeAdd = function(el, type, fn, capture) {
3237N/A this._nativeAdd.apply(this, arguments);
2310N/A el.addEventListener(type, fn2, !!capture);
2310N/A } else if (el.attachEvent) {
2858N/A el.attachEvent("on" + type, fn2);
2852N/A Y.DD.DDM.on('ddm:start', function(e) {
3136N/A console.log('DDM:start :: ', e);
3237N/A Y.DD.DDM.on('drag:end', function(e) {
3237N/A console.log('DDM:end :: ', e);
2852N/A handles: [Y.one('#drag h2')],
2852N/A one: 'This is my data object',
2852N/A two: 'This is my data object',
2508N/A three: 'This is my data object'
2867N/A //dd.on('drag', console.log);
2535N/A dd.on('drag:end', function(e) {
2535N/A //console.log('drag:end: ', e);
2339N/A dd.on('drag:start', function() {
2339N/A console.log('start-event: ', (new Date()).getTime());
691N/A dd.on('drag:drag', function() {
691N/A console.log('drag-event: ', (new Date()).getTime());
395N/A dd.on('drag:drag', function(e) {
395N/A console.log('drag-event: ', e.pageX);
591N/A //}).addHandle('h2')._bubbles.beforeMouseDown.subscribe('drag:beforeMouseDown', function(e) {
591N/A dd.on('drag:mouseDown', function(e) {
2639N/A Y.log('mouseDown:: ', arguments);
2639N/A Y.log('mouseDown Event stopped');
1505N/A dd.on('drag:start', function(e) {
2516N/A //dd.on('drag:mouseDown', function(e) {
1632N/A Y.Node.get('document').on('keypress', function(e) {
1632N/A if ((e.keyCode === 27) || (e.charCode === 27)) {
2339N/A //console.info('DD is dragging, stop it..');
2339N/A Y.DD.DDM.activeDrag.stopDrag();
2339N/A dd.on('drag:enter', function() {
2339N/A //Y.log('drag:enter', arguments);
2339N/A dd.on('drag:over', function() {
2339N/A //Y.log('drag:over', arguments);
2364N/A dd.on('drag:exit', function() {
2828N/A //Y.log('drag:exit', arguments);
2828N/A Y.DD.DDM.on('drag:drophit', function(e) {
2828N/A console.log('drag:drophit :: ' + e.drop.get('node').get('id'), e);
2828N/A Y.DD.DDM.on('drag:dropmiss', function() {
2828N/A console.log('drag:dropmiss', arguments);
2828N/A Y.DD.DDM.on('drag:drag', function(e) {
2828N/A console.log('DDM:drag:drag :: ', arguments);
2828N/A Y.DD.DDM.on('drop:over', function(e) {
2828N/A console.log('DDM:drop:over :: ', arguments);
2828N/A Y.DD.DDM.on('drag:mouseDown', function(e) {
2828N/A Y.log('DDMFire: drag:mouseDown :: ', arguments);
2892N/A Y.log('DDM stopped event..');
2339N/A dd3 = Y.Node.get('#drag3');
2339N/A handles: [Y.all('#drag3 h2')],
2339N/A dd3.dd.plug(Y.Plugin.DDProxy, {});
2339N/A //dd3.dd.addHandle('h2.one').addHandle('h2.two').removeHandle('h2.one').addHandle('h2.three').addHandle('h2.four');
2339N/A dd3.dd.addInvalid('h2.one');
2339N/A dd3.dd.after('drag:start', function(e) {
2339N/A this.get('dragNode').setStyles({
2364N/A dd3.dd.on('activeHandle', function(e) {
2364N/A console.log('activeHandle::halt');
395N/A //}).addHandle('h2').addInvalid('h2.two');
290N/A }).addHandle('h2.one').addHandle('h2.two').removeHandle('h2.one').addHandle('h2.three').addHandle('h2.four');
290N/A dd3.on('drag:drophit', function(e) {
2339N/A //console.log('drag:drophit :: ' + e.drop.get('node').get('id'), e);
290N/A dd3.on('drag:start', function(args) {
290N/A if (this.get('activeHandle').test('h2.two')) {
290N/A this.set('move', false);
290N/A this.set('move', true);
290N/A dd3.on('drag:drag', function(args) {
395N/A if (this.get('activeHandle').test('h2.two')) {
395N/A var size = (args.info.xy[0] - args.info.start[0]);
290N/A var w = parseInt(this.get('dragNode').getStyle('width'), 10);
290N/A this.get('dragNode').setStyle('width', (size) + 'px');
290N/A Y.Node.get('#test').on('click', function() {
2674N/A Y.log('_setStartPosition:', 'info', 'Dav Test');
3158N/A dd.set('activeHandle', dd.get('node'));
395N/A dd._setStartPosition(dd.get('node').getXY());
395N/A Y.log('DDM::activeDrag:', 'info', 'Dav Test');
3158N/A Y.log('dd.start():', 'info', 'Dav Test');
3158N/A for (var i = 0; i < 726;
i++) {
395N/A //
Y.log('
moveNode([' +
i + ', 129]):', '
info', '
Dav Test');
2674N/A Y.DD.DDM._move({
pageX:
i,
pageY: 129});
591N/A Y.log('
end', '
info', '
Dav Test');
2674N/A Y.log('
_handleMouseUp():', '
info', '
Dav Test');
2639N/A //
var b =
Y.Node.get('#play'); 2639N/A var b =
document.getElementById('play'); 2674N/A var el =
document.createElement('div'); 691N/A el.innerHTML =
'Drop on Me (#' +
i + ')';
3158N/A var start =
(new Date()).
getTime();
2339N/A var drop =
new Y.DD.Drop( {
3026N/A groups: [((
i % 2) ? '
two' : '
one')]
3158N/A //
lock: ((
i % 2) ?
true :
false)//,
3026N/A var end =
(new Date()).
getTime();
3053N/A //
console.log(
i, ': ', (
end -
start));
3158N/A drop.on('
drop:
enter',
function(
ev) {
3053N/A //
Y.log('
drop:
enter :: ',
this.get('
node').
get('
id'));
3053N/A drop.on('
drop:
over',
function() {
290N/A //
Y.log('
drop:
over :: ',
this.get('
node').
get('
id'));
290N/A drop.on('
drop:
exit',
function() {
290N/A //
Y.log('
drop:
exit :: ',
this.get('
node').
get('
id'));
591N/A drop.on('
drop:
hit',
function(
e) {
2639N/A console.log('
drop:
hit ::
Drag: ' +
e.drag.get('
node').
get('
id') + ' :::
Drop: ' +
this.get('
node').
get('
id'),
e);
2639N/A //
console.log('
Payload: ',
e.drag.get('
data'));