DragnDrop Questions

[alexpetri]

Hi,

i have some troubles getting my DragnDrop Test to work. Its based on the hospital example.
I have a simple viewport which contains the dropzone in center and the draggable Elements in the east panel

Ext.onReady(function(){
                Ext.QuickTips.init();
                var myViewPort = new Ext.Viewport({
                    layout: 'border',
                    items: [{
                        cls: 'app-header',region: 'north', height: 100,
                        html: '<h1>my Drop Test</h1>'
                    }, {
                        title: 'Patients',region: 'east', width: 300,
                        items: patientView,
                        id: 'patientDragPanel',
                        collapsible: true
                    }, {
                        region: 'center',
                        margins: '0 5 5 0',
                        title: 'MainPanel',
                        id: 'PatientDropPanel',
                        layout: 'fit',
                        items: {
                            cls: 'dropZone',
                            html: 'content',
                            id: 'myDropContainer' 
                        }
                    }]
                });
                var dragZone1 = new MyDragZone(patientView, {
                    containerScroll: true, ddGroup: 'organizerDD'
                });
                var dropZone1 = new MyDropZone(Ext.getCmp('PatientDropPanel'), {
                    containerScroll: true, ddGroup: 'organizerDD'
                })
            });

so i build up the patient view in the east panel:

     var patients = [
     	{insuranceCode: '11111',name: 'Fred Bloggs', address: 'Main Street', telephone: '555 1234 123'}, 
     	{insuranceCode: '22222',name: 'Fred West',address: 'Cromwell Street',telephone: '666 666 666'}, 
     	{insuranceCode: '33333',name: 'Fred Mercury',address: 'Over The Rainbow',telephone: '555 321 0987' }, 
     	{insuranceCode: '44444',name: 'Fred Forsyth',address: 'Blimp Street',telephone: '555 111 2222'}, 
     	{insuranceCode: '55555',name: 'Fred Douglass',address: 'Talbot County, Maryland',telephone: 'N/A'}
     ];

    var PatientRecord = Ext.data.Record.create([{ name: 'name' }, { name: 'address' }, { name: 'telephone'}]);

    var patientStore = new Ext.data.Store({
        data: patients,
        reader: new Ext.data.JsonReader({id: 'insuranceCode'}, PatientRecord)
    });

    var patientView = new Ext.DataView({
		id:'myPatientView',
        cls: 'patient-view',
        tpl: '<tpl for=".">' +
                '<div class="patient-source"><table><tbody>' +
                    '<tr><td class="patient-label">Name</td><td class="patient-name">{name}</td></tr>' +
                    '<tr><td class="patient-label">Address</td><td class="patient-name">{address}</td></tr>' +
                    '<tr><td class="patient-label">Telephone</td><td class="patient-name">{telephone}</td></tr>' +
                '</tbody></table><hr/></div>' +
             '</tpl>',
        itemSelector: 'div.patient-source',
        store: patientStore
    });

and add the drag/dropzones:

MyDragZone = function(view, config){
	this.view = view;
	console.log('drag Zone initialized: '+view.getEl().id);
	MyDragZone.superclass.constructor.call(this, view.getEl(), config);
};

Ext.extend(MyDragZone, Ext.dd.DragZone, {
	getDragData : function(e){
		
		var view = this.view;
		// get the source Element from EventTarget
		var sourceElement = e.getTarget(view.itemSelector,100);
		if(sourceElement){
			console.log('sourceElement found ');
			console.log(view.id);
			clonedSourceElement = sourceElement.cloneNode(true);
			clonedSourceElement.id = Ext.id();
			var dragData = {
				ddel:clonedSourceElement,
				sourceElementPosition: Ext.fly(sourceElement).getXY(),
				patientData: view.getRecord(sourceElement).data,
				patientRecord:view.getRecord(sourceElement)
			}
			return dragData;
		}else{
			console.log('no Target found');
			return false;
		}
    },
	getRepairXY: function(e){
		return this.dragData.sourceElementPosition;
	}
});

MyDropZone = function(view, config) {
	this.view = view;
	console.log('drop Zone initialized: ' + view.getEl().id);
	MyDropZone.superclass.constructor.call(this, view.getEl(), config);

};
Ext.extend(MyDropZone, Ext.dd.DropZone, {
	getTargetFromEvent : function(e) {
		var view = this.view;
		return e.getTarget('.dropZone');
	},
	onNodeOver : function(target, dd, e, data) {
		return Ext.dd.DropZone.prototype.dropAllowed;
	},
	onNodeDrop : function(target, dd, e, data) {
		Ext.Msg.alert('Drop gesture', 'Dropped patient '
				+ data.patientData.name + ' on panel');
		var pw = Ext.getCmp('myPatientView');
		var dropContainer = Ext.get('myDropContainer');
		alert(dropContainer.html);
		dropContainer.html = dropContainer.html + "<br/>"
				+ data.patientData.name + " added";
		console.log(pw.store.getCount());
		pw.store.remove(data.patientRecord);
		console.log(pw.store.getCount());
		pw.render();
		return true;
	}
});

Dragging the "patient"-Objects works properly - but i have some troubles to get the dropZone (which should be the center panel in my viewport). Sometimes the dragobject recognizes that it is over the dragzone, and sometimes it doesnt - so i cant drop (the dragobject doesnt show the green checkmark/tick). I cant figure out whats the problem there - please help me.

[Animal]

In FF2?

If so, then it's to do with mousedowning on whitespace as opposed to text, and it's fixed in FF3.

[alexpetri]

how can i fix that?

[Animal]

I don't think you can. It's an FF2 problem. I noticed it when I was writing and testing that example, and I hunted for a bug in my code or Ext code, and came up with nothing. It's the browser that's at fault I think.