Cannot enable dragging in Siesta test case

[vanessa]

I enabled dragging in production UI and it has been working in both Chrome and FF. However, the same thing does not work with Siesta test case. I inspected the Dom to make sure "draggable" attribute is true. However, when I manually drag the item using the mouse, no drag event happens. I am supposed to hit my "debugger" statement. Any idea why?

StartTest(function(t) {
	t.requireOk([
		'composition.Events',
		'composition.store.core.catalog.ListAllComposableItemsForProviderListStore',
		'composition.view.graph.blueprint.BlueprintCanvas',
		'composition.view.graph.blueprint.BlueprintCanvasController'], function() {

        var composableItemStore = Ext.create('composition.store.core.catalog.ListAllComposableItemsForProviderListStore', {
        	data: [{
        		name: 'Iaas Machine',
        		id: '111'
        	}, {
        		name: 'Apache',
        		id: '112'
        	}]
        });
       
		Ext.create('Ext.container.Viewport', {
			renderTo: Ext.getBody(),
			layout: 'border',
			width: 500,
			height: 500,
			items: [{
				xtype: 'gridpanel',
				reference: 'leftPanel',
				region: 'west',
				title: 'Components',
				border: false,
            	                hideHeaders: true,
            	                rowLines: false,
				split: true,
                               collapsible: true,
                               collapseMode: 'mini',
                               animCollapse: false,
                               bufferedRenderer: false,
            	               autoScroll: true,
                              width: 200,
                viewConfig: {
                	stripeRows: false,
                	// selection isn't needed for row drag and drop
                	disableSelection: true
            	},
                columns:[{
                	dataIndex: 'name',
                	flex: 1
                }],
                store: composableItemStore,
                listeners: {
	            	viewready: function(leftPanel) {
	            		var records = leftPanel.getStore().getRange(),
	            			view = leftPanel.getView(),
	            			row;

	            		// drag callback
				        var dragStart = function(event) {
				        	debugger;
				            leftPanel.fireEvent('dragstart', event, leftPanel);
				        };

				        Ext.Array.each(records, function(record) {
				            row = view.getRow(record);
				            composition.Events.makeDraggable(row, dragStart);
				        });
	            	},
	            	dragstart: function(event, masterDetailsLeftPanel) {
						debugger;
	            	}
            	}
			}, {
				xtype: 'blueprintCanvas',
				reference: 'blueprintCanvas',
				region: 'center'
			}]
		});
	});
});

Ext.define('composition.Events', {
    singleton: true,
    /**
     *  Attaches a listener to the specified element.
     *      @param element: the DOM element
     *      @param eventName: the name of the event
     *      @param listener: the event callback
     */
    addListener: function(element, eventName, listener) {
        if (element.addEventListener) {
            element.addEventListener(eventName, listener, false);
        } else {
            // Internet Explorer
            // note: event names must be prepended with 'on'
            element.attachEvent('on' + eventName, listener);
        }
    },

    /**
     *  Enables drag and drop event chain on an element.
     *      @param element: the DOM element
     *      @param dragStartHandler: the callback
     */
    makeDraggable: function(element, dragStartHandler) {
        element.setAttribute('draggable', true);
        composition.Events.addListener(element, 'dragstart', dragStartHandler);
    }
});

[mats]

We need a simple clear test case (runnable) to be able to assist you with debugging it.

[vanessa]

Thank you. Here is the test case that you can run

StartTest({
	autoCheckGlobals: false
}, function(t) {
	t.requireOk([], function() {

		Ext.define('ComposableItem', {
			extend: 'Ext.data.Model',
			fields: [{
				name: 'name', type: 'string'
			}, {
				name: 'id', type: 'int'
			}]
		});

		var data = {
			items: [{
        		name: 'Iaas Machine',
        		id: '111'
        	}, {
        		name: 'Apache',
        		id: '112'
        	}]
		};

        var composableItemStore = Ext.create('Ext.data.Store', {
        	autoLoad: true,
        	model: 'ComposableItem',
        	data: data,
        	proxy: {
        		type: 'memory',
        		reader: {
        			type: 'json',
        			rootProperty: 'items'
        		}
        	}
        });
       
		Ext.create('Ext.container.Viewport', {
			renderTo: Ext.getBody(),
			layout: 'border',
			width: 500,
			height: 500,
			items: [{
				xtype: 'gridpanel',
				reference: 'leftPanel',
				region: 'west',
				title: 'Components',
				border: false,
            	hideHeaders: true,
            	rowLines: false,
				split: true,
                collapsible: true,
                collapseMode: 'mini',
                animCollapse: false,
                bufferedRenderer: false,
            	autoScroll: true,
                width: 200,
                viewConfig: {
                	stripeRows: false,
                	// selection isn't needed for row drag and drop
                	disableSelection: true
            	},
                columns:[{
                	dataIndex: 'name',
                	flex: 1
                }],
                store: composableItemStore,
                listeners: {
	            	viewready: function(leftPanel) {
	            		var records = leftPanel.getStore().getRange(),
	            			view = leftPanel.getView(),
	            			row;

	            		// drag callback
				        var dragStart = function(event) {
				        	debugger;
				            leftPanel.fireEvent('dragstart', event, leftPanel);
				        };

				        var addListener = function(element, eventName, listener) {
				        	if (element.addEventListener) {
					            element.addEventListener(eventName, listener, false);
					        } else {
					            // Internet Explorer
					            // note: event names must be prepended with 'on'
					            element.attachEvent('on' + eventName, listener);
					        }
			        	};

				        var makeDraggable = function(element, dragStartHandler) {
				        	element.setAttribute('draggable', true);
        					addListener(element, 'dragstart', dragStartHandler);

        					if (element.dragDrop) {
					            var ieDrag = function(event) {
					                element.dragDrop();
					            };
					            // starting the DnD chain from onmousemove allows any arbitrary
					            // element to be draggable in IE, instead of just <img> and <a>.
					            addListener(element, 'mousedown', ieDrag);
					        }
				        };

				        Ext.Array.each(records, function(record) {
				            row = view.getRow(record);
				            makeDraggable(row, dragStart);
				        });
	            	},
	            	dragstart: function(event, leftPanel) {
						debugger;
	            	}
            	}
			}, {
				xtype: 'panel',
				reference: 'blueprintCanvas',
				region: 'center'
			}]
		});
	});
});

[vanessa]

Here is a fiddle link of a working code. You can see that dragging is working in Chrome
https://fiddle.sencha.com/#fiddle/bsd

[nickolay]

Hm.. You mean native browser drag and drop behavior is not activated by Siesta? Its probably not supported yet.

[vanessa]

What a bummer. Is there any workaround?

[mats]

In that fiddle, what are you trying to drag exactly?

[vanessa]

I was trying to drag Apache or Iaas Machine. You can see a drag image moving with the mouse cursor. However, if you do the same thing in Siesta test case, you don't see any drag image.

[mats]

I'd recommend to use the Sencha drag drop implementation. The native one you use is not x-browser, and native DnD is not a very good solution. Please see:

https://www.quirksmode.org/blog/archives ... _drag.html

After spending about a day and a half in testing I am forced to conclude that the HTML5 drag and drop module is not just a disaster, it’s a fucking disaster.