YUI().use('dd-ddm', 'dd-drag', 'dd-proxy', function(Y) {
//Toggling the buttons
Y.one('#shim').on('click', function(e) {
var value = e.target.get('value');
if (value == 'off' || value == 'Turn Shim On') {
dd.set('useShim', true);
e.target.set('value', 'on');
e.target.set('innerHTML', 'Turn Shim Off');
Y.one('#debugShim').set('disabled', false);
} else {
dd.set('useShim', false);
e.target.set('value', 'off');
e.target.set('innerHTML', 'Turn Shim On');
Y.one('#debugShim').set('disabled', true);
}
});
Y.one('#debugShim').on('click', function(e) {
var value = e.target.get('value');
if (value == 'off' || value == 'Turn Debugging On') {
Y.DD.DDM._debugShim = true;
e.target.set('value', 'on');
e.target.set('innerHTML', 'Turn Debugging Off');
} else {
Y.DD.DDM._debugShim = false;
e.target.set('value', 'off');
e.target.set('innerHTML', 'Turn Debugging On');
}
});
var dd = new Y.DD.Drag({
//Selector of the node to make draggable
node: '#demo',
useShim: false
}).plug(Y.Plugin.DDProxy, {
offsetNode: false,
resizeFrame: false
});
dd.on('drag:start', function() {
this.get('dragNode').setStyles({
height: '20px',
width: '100px',
backgroundColor: 'blue',
color: '#fff'
});
this.get('dragNode').set('innerHTML', 'Custom Proxy');
});
});