Results 1 to 3 of 3

Thread: Help, about component drag drop

  1. #1
    Sencha User husniadil's Avatar
    Join Date
    Jul 2009
    Location
    Yogyakarta, Indonesia
    Posts
    45

    Post Help, about component drag drop

    Hi all..

    I'm learning drag drop for extjs component. I've some problems. I hope you would help me



    I built 2 panels,
    1. DragSourcePanel, contains components that can be dragged.
    2. DropTargetPanel, the drop target for draggable components in DragSourcePanel

    My questions are:

    1. I see animation after mouseup, the dragged component that follow mouse movement is back to it's original location. How can I remove the animation after "endDrag" executed?

    2. How about dragging and sorting on the components in the panel? I want make the components on DropTargetPanel could be sorted with dragging.


    thanks for the help


    husni.adil





    preview:
    http://mashusni.co.cc/files/extjs-dd/

    code:
    HTML Code:
    // husni - hello world - drag drop test
    
    Ext.ns('husni');
    
    Ext.onReady(function() {
        
        husni.DragSourcePanel = new Ext.Panel({
            renderTo: Ext.getBody(),
            title: 'Drag Source Panel',
            floating: true,
            shadow: false,
            x: 250,
            y: 100,
            frame: true,
            width: 200,
            items: [new Ext.form.TextField(),new Ext.form.TextArea()],
            defaults: {
                style: 'margin-bottom: 5px'
            }
        });
        
        husni.DropTargetPanel = new Ext.Panel({
            renderTo: Ext.getBody(),
            title: 'Drop Target Panel',
            floating: true,
            shadow: false,
            frame: true,
            x: 500,
            y: 100,
            width: 300,
            height: 200,
            layout: 'form',
            autoScroll: true,
            defaults: {
                anchor: '90%',
                fieldLabel: 'New Field'
            },
            listeners: {
                afterlayout: function(x) {
                    var fields = x.findByType('field');
                    Ext.each(fields, function (field) {
                        var ddsource = new Ext.dd.DragSource(field.getId(), {
                            ddGroup: 'group2',
                            afterDragDrop: function(e,id) {
                                var oid = field.getId();
                                var o = Ext.getCmp(oid);
                                Ext.get(oid).parent().parent().remove();
                                x.remove(o,true);
                                x.doLayout();
                            },
                            getDragData: function() {
                                return field;
                            }
                        });
                        ddsource = null;
                    });
                }
            }
        });
    
        var fields = husni.DragSourcePanel.findByType('field');
        Ext.each(fields, function (field) {
            var ddsource = new Ext.dd.DragSource(field.getId(), {
                ddGroup: 'group1',
                afterDragDrop: function(e,id) {
                    var o = null;
                    switch(field.getXType()) {
                        case 'textfield':
                            o = new Ext.form.TextField();
                        break;
                        case 'textarea':
                            o = new Ext.form.TextArea();
                        break;
                    }
                    husni.DropTargetPanel.add(o);
                    husni.DropTargetPanel.doLayout();
                },
                getDragData: function() {
                    return field;
                }
            });
            ddsource = null;
        });
        
        var ddtarget = new Ext.dd.DropTarget(husni.DragSourcePanel.getId(), {
            ddGroup: 'group2'
        });
        
        ddtarget = new Ext.dd.DropTarget(husni.DropTargetPanel.getId(), {
            ddGroup: 'group1'
        });
        
        ddtarget = null;
    
    });

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    to sort, you will need a custom method that somehow sorts the child items based on some key and then call add/remove/etc internally.

  3. #3
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    if the drop is successful, you can end the drop by the following override method:

    Code:
     endDrag : function() {
                    var dragProxy = Ext.get(this.getDragEl());
                    dragProxy.hide();
                }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •