[CLOSED] drag and drop`

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] drag and drop`

    I am building an application that requires we manage images. I want to utilize the drag and drop functionality, however I don't know the best way to handle my requirements. Please see the attachment. When you drag an image to a position...It needs to cause an save event on the server. Please provide a code sample.

    ThanksClick image for larger version. 

Name:	drag and drop.png 
Views:	168 
Size:	41.2 KB 
ID:	2612
    Last edited by Daniil; May 17, 2011 at 3:03 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please investigate the online DragDrop examples: the DragDrop folder on
    https://examples1.ext.net

    Also please investigate DragZone and DropZone APIs.
    http://dev.sencha.com/deploy/dev/doc...xt.dd.DragZone
    http://dev.sencha.com/deploy/dev/doc...xt.dd.DropZone

    One of its events will suite your needs to fire a 'server save event'.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    Please investigate the online DragDrop examples: the DragDrop folder on
    https://examples1.ext.net

    Also please investigate DragZone and DropZone APIs.
    http://dev.sencha.com/deploy/dev/doc...xt.dd.DragZone
    http://dev.sencha.com/deploy/dev/doc...xt.dd.DropZone

    One of its events will suite your needs to fire a 'server save event'.

    I looked at all of the EXT.Net examples before posting this...If I would have found what I thought would work, I would not have posted. Please post ext demo code that allow for you to drag and drop in a specific order...The only thing I saw in the "examples" moved the item to the top or bottom order only.
  4. #4
    Hi,

    Please see the following sample
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
        
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
        
        <script type="text/javascript">
            Ext.ux.YReorderer = Ext.extend(Object, {
                defaults: {              
                    animate: true,
                    animationDuration: 0.2,
                    defaultReorderable: true
                },
    
                constructor: function(config) {
                    Ext.apply(this, config || {}, this.defaults);
                },
    
                init: function(target) {
                    this.target = target;                
                    this.initEvents();
                    
                    var items  = this.getItems(),
                        length = items.length,
                        i;
                    
                    for (i = 0; i < length; i++) {
                        this.createIfReorderable(items[i]);
                    }
                },
                
                reorder: function(mappings) {
                    var target = this.target;
                    
                    if (target.fireEvent('before-reorder', mappings, target, this) !== false) {
                        this.doReorder(mappings);
                        
                        target.fireEvent('reorder', mappings, target, this);
                    }
                },
                
                doReorder: function(paramName) {
                    throw new Error("doReorder must be implemented in the Ext.ux.YReorderer subclass");
                },
                
                createItemDD: function(item) {
                    throw new Error("createItemDD must be implemented in the Ext.ux.YReorderer subclass");
                },
                
                createItemDD: function(button) {
                    var el   = button.getEl(),
                        id   = el.id,
                        tbar = this.target,
                        me   = this;
                    
                    button.dd = new Ext.dd.DD(el, undefined, {
                        isTarget: false
                    });
                    
                    button.dd.constrainTo(tbar.getEl());
                    button.dd.setXConstraint(0, 0, 0);
                    
                    Ext.apply(button.dd, {
                        b4StartDrag: function() {       
                            this.startPosition = el.getXY();
                            
                            this.startZIndex = el.getStyle('zIndex');
                            el.setStyle('zIndex', 10000);
                            
                            button.suspendEvents();
                        },
                        
                        onDrag: function(e) {
                            var buttonY  = el.getXY()[1],
                                deltaY   = buttonY - this.startPosition[1],
                                items    = tbar.items.items,
                                oldIndex = items.indexOf(button),
                                newIndex;
                            
                            for (var index = 0; index < items.length; index++) {
                                var item = items[index];
                                
                                if (item.reorderable && item.id != button.id) {
                                    var box        = item.getEl().getBox(),
                                        midpoint   = (me.buttonYCache[item.id] || box.y) + (box.height / 2),
                                        movedUp  = oldIndex > index && deltaY < 0 && buttonY < midpoint,
                                        movedBottom = oldIndex < index && deltaY > 0 && (buttonY + el.getHeight()) > midpoint;
                                    
                                    if (movedUp || movedBottom) {
                                        me[movedUp ? 'onMovedUp' : 'onMovedBottom'](button, index, oldIndex);
                                        break;
                                    }                        
                                }
                            }
                        },
                        
                        endDrag: function() {
                            me.updateButtonYCache();
                            
                            el.moveTo(me.buttonYCache[button.id], undefined, {
                                duration: me.animationDuration,
                                scope   : this,
                                callback: function() {
                                    button.resumeEvents();
                                    
                                    tbar.fireEvent('reordered', button, tbar);
                                }
                            });
                            
                            el.setStyle('zIndex', this.startZIndex);
                        }
                    });
                },
     
                createIfReorderable: function(item) {
                    if (this.defaultReorderable && item.reorderable == undefined) {
                        item.reorderable = true;
                    }
                    
                    if (item.reorderable && !item.dd) {
                        if (item.rendered) {
                            this.createItemDD(item);                
                        } else {
                            item.on('render', this.createItemDD.createDelegate(this, [item]), this, {single: true});
                        }
                    }
                },
                
                getItems: function() {
                    return this.target.items.items;
                },
                
                initEvents: function() {
                    this.target.addEvents(
                      'before-reorder',                  
                      'reorder'
                    );
                }
            });
    
            Ext.ux.VBoxReorderer = Ext.extend(Ext.ux.YReorderer, {
                init: function(container) {
                    this.buttonYCache = {};
                    
                    container.on({
                        scope: this,
                        add  : function(container, item) {
                            this.createIfReorderable(item);
                        }
                    });
                    
                    Ext.ux.VBoxReorderer.superclass.init.apply(this, arguments);
                },
                
                createItemDD: function(button) {
                    if (button.dd != undefined) {
                        return;
                    }
                    
                    var el   = button.getEl(),
                        id   = el.id,
                        me   = this,
                        tbar = me.target;
                    
                    button.dd = new Ext.dd.DD(el, undefined, {
                        isTarget: false
                    });
                    
                    el.applyStyles({
                        position: 'absolute'
                    });
                    
                    var menuDisabler = function() {
                        return false;
                    };
                    
                    Ext.apply(button.dd, {
                        b4StartDrag: function() {       
                            this.startPosition = el.getXY();
                            
                            this.startZIndex = el.getStyle('zIndex');
                            el.setStyle('zIndex', 10000);
                            
                            button.suspendEvents();
                            if (button.menu) {
                                button.menu.on('beforeshow', menuDisabler, me);
                            }
                        },
                        
                        startDrag: function() {
                            this.constrainTo(tbar.getEl());
                            this.setXConstraint(0, 0, 0);
                        },
                        
                        onDrag: function(e) {
                            var buttonY  = el.getXY()[1],
                                deltaY   = buttonY - this.startPosition[1],
                                items    = tbar.items.items,
                                length   = items.length,
                                oldIndex = items.indexOf(button),
                                newIndex, index, item;
                            
                            for (index = 0; index < length; index++) {
                                item = items[index];
                                
                                if (item.reorderable && item.id != button.id) {
                                    var box        = item.getEl().getBox(),
                                        midpoint   = (me.buttonYCache[item.id] || box.y) + (box.height / 2),
                                        movedUp  = oldIndex > index && deltaY < 0 && buttonY < midpoint,
                                        movedBottom = oldIndex < index && deltaY > 0 && (buttonY + el.getHeight()) > midpoint;
                                    
                                    if (movedUp || movedBottom) {
                                        me[movedUp ? 'onMovedUp' : 'onMovedBottom'](button, index, oldIndex);
                                        break;
                                    }                        
                                }
                            }
                        },
                       
                        endDrag: function() {                   
                            me.updateButtonYCache();
                            
                            el.moveTo(el.getX(), me.buttonYCache[button.id], {
                                duration: me.animationDuration,
                                scope   : this,
                                callback: function() {
                                    button.resumeEvents();
                                    if (button.menu) {
                                        button.menu.un('beforeshow', menuDisabler, me);
                                    }
                                    
                                    tbar.fireEvent('reordered', button, tbar);
                                }
                            });
                            
                            el.setStyle('zIndex', this.startZIndex);
                        }
                    });
                },
                
                onMovedUp: function(item, newIndex, oldIndex) {
                    var tbar   = this.target,
                        items  = tbar.items.items,
                        length = items.length,
                        index;
                    
                    if (newIndex != undefined && newIndex != oldIndex) {
                        tbar.remove(item, false);
                        tbar.insert(newIndex, item);
                        
                        this.updateButtonYCache();
                        for (index = 0; index < length; index++) {
                            var obj  = items[index],
                                newY = this.buttonYCache[obj.id];
                            
                            if (item == obj) {
                                item.dd.startPosition[1] = newY;
                            } else {
                                var el = obj.getEl();
                                
                                el.moveTo(el.getX(), newY, {
                                    duration: this.animationDuration
                                });
                            }
                        }
                    }
                },
                
                onMovedBottom: function(item, newIndex, oldIndex) {
                    this.onMovedUp.apply(this, arguments);
                },
    
                updateButtonYCache: function() {
                    var tbar   = this.target,
                        items  = tbar.items,
                        totalY = tbar.getEl().getBox(true).y;
                        
                    items.each(function(item) {
                        this.buttonYCache[item.id] = totalY;
    
                        totalY += item.getEl().getHeight();
                    }, this);
                }
            });
        </script>
    </head>
    <body style="padding:20px;">
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:Panel runat="server" Title="Panel" Width="202" Height="627" Layout="FitLayout">
                <Items>
                    <ext:Container runat="server" Layout="VBoxLayout">
                        <Items>
                            <ext:Image runat="server" ImageUrl="http://flickholdr.com/200/200/sea" Height="200" Width="200">
                                <LoadMask ShowMask="true" />
                            </ext:Image>
                            <ext:Image runat="server" ImageUrl="http://flickholdr.com/200/200/sun" Height="200" Width="200">
                                <LoadMask ShowMask="true" />
                            </ext:Image>
                            <ext:Image runat="server" ImageUrl="http://flickholdr.com/200/200/wind" Height="200" Width="200">
                                <LoadMask ShowMask="true" />
                            </ext:Image>
                        </Items>
                        <Plugins>
                            <ext:GenericPlugin runat="server" InstanceName="Ext.ux.VBoxReorderer" />
                        </Plugins>
                    </ext:Container>
                </Items>            
            </ext:Panel>
        </form>
    </body>
    </html>
  5. #5

    Still having issues with drag and drop

    Ok...I am still having the same issues with drag and drop. Please see the code below. If I try to drag an item in data view...It always places that item in the last position. It is very important that I get this fixed ASAP. Please see my attachment above if you still don't understand what I am talking about.

     <script type="text/javascript">
            Ext.ux.YReorderer = Ext.extend(Object, {
                defaults: {
                    animate: true,
                    animationDuration: 0.2,
                    defaultReorderable: true
                },
    
                constructor: function (config) {
                    Ext.apply(this, config || {}, this.defaults);
                },
    
                init: function (target) {
                    this.target = target;
                    this.initEvents();
    
                    var items = this.getItems(),
                        length = items.length,
                        i;
    
                    for (i = 0; i < length; i++) {
                        this.createIfReorderable(items[i]);
                    }
                },
    
                reorder: function (mappings) {
                    var target = this.target;
    
                    if (target.fireEvent('before-reorder', mappings, target, this) !== false) {
                        this.doReorder(mappings);
    
                        target.fireEvent('reorder', mappings, target, this);
                    }
                },
    
                doReorder: function (paramName) {
                    throw new Error("doReorder must be implemented in the Ext.ux.YReorderer subclass");
                },
    
                createItemDD: function (item) {
                    throw new Error("createItemDD must be implemented in the Ext.ux.YReorderer subclass");
                },
    
                createItemDD: function (button) {
                    var el = button.getEl(),
                        id = el.id,
                        tbar = this.target,
                        me = this;
    
                    button.dd = new Ext.dd.DD(el, undefined, {
                        isTarget: false
                    });
    
                    button.dd.constrainTo(tbar.getEl());
                    button.dd.setXConstraint(0, 0, 0);
    
                    Ext.apply(button.dd, {
                        b4StartDrag: function () {
                            this.startPosition = el.getXY();
    
                            this.startZIndex = el.getStyle('zIndex');
                            el.setStyle('zIndex', 10000);
    
                            button.suspendEvents();
                        },
    
                        onDrag: function (e) {
                            var buttonY = el.getXY()[1],
                                deltaY = buttonY - this.startPosition[1],
                                items = tbar.items.items,
                                oldIndex = items.indexOf(button),
                                newIndex;
    
                            for (var index = 0; index < items.length; index++) {
                                var item = items[index];
    
                                if (item.reorderable && item.id != button.id) {
                                    var box = item.getEl().getBox(),
                                        midpoint = (me.buttonYCache[item.id] || box.y) + (box.height / 2),
                                        movedUp = oldIndex > index && deltaY < 0 && buttonY < midpoint,
                                        movedBottom = oldIndex < index && deltaY > 0 && (buttonY + el.getHeight()) > midpoint;
    
                                    if (movedUp || movedBottom) {
                                        me[movedUp ? 'onMovedUp' : 'onMovedBottom'](button, index, oldIndex);
                                        break;
                                    }
                                }
                            }
                        },
    
                        endDrag: function () {
                            me.updateButtonYCache();
                            el.moveTo(me.buttonYCache[button.id], undefined, {
                                duration: me.animationDuration,
                                scope: this,
                                callback: function () {
                                    button.resumeEvents();
    
                                    tbar.fireEvent('reordered', button, tbar);
                                }
                            });
    
                            el.setStyle('zIndex', this.startZIndex);
                        }
                    });
                },
    
                createIfReorderable: function (item) {
                    if (this.defaultReorderable && item.reorderable == undefined) {
                        item.reorderable = true;
                    }
    
                    if (item.reorderable && !item.dd) {
                        if (item.rendered) {
                            this.createItemDD(item);
                        } else {
                            item.on('render', this.createItemDD.createDelegate(this, [item]), this, { single: true });
                        }
                    }
                },
    
                getItems: function () {
                    return this.target.items.items;
                },
    
                initEvents: function () {
                    this.target.addEvents(
                      'before-reorder',
                      'reorder'
                    );
                }
            });
    
            Ext.ux.VBoxReorderer = Ext.extend(Ext.ux.YReorderer, {
                init: function (container) {
                    this.buttonYCache = {};
                    container.on({
                        scope: this,
                        add: function (container, item) {
                            this.createIfReorderable(item);
                        }
                    });
                    Ext.ux.VBoxReorderer.superclass.init.apply(this, arguments);
                },
    
                createItemDD: function (button) {
                    if (button.dd != undefined) {
                        return;
                    }
                    var el = button.getEl(),
                        id = el.id,
                        me = this,
                        tbar = me.target;
    
                    button.dd = new Ext.dd.DD(el, undefined, {
                        isTarget: false
                    });
    
                    el.applyStyles({
                    //  position: 'absolute'
                });
    
                var menuDisabler = function () {
                    return false;
                };
    
                Ext.apply(button.dd, {
                    b4StartDrag: function () {
                        this.startPosition = el.getXY();
    
                        this.startZIndex = el.getStyle('zIndex');
                        el.setStyle('zIndex', 10000);
    
                        button.suspendEvents();
                        if (button.menu) {
                            button.menu.on('beforeshow', menuDisabler, me);
                        }
                    },
    
                    startDrag: function () {
                        this.constrainTo(tbar.getEl());
                        this.setXConstraint(0, 0, 0);
                    },
    
                    onDrag: function (e) {
                        var buttonY = el.getXY()[1],
                                deltaY = buttonY - this.startPosition[1],
                                items = tbar.items.items,
                                length = items.length,
                                oldIndex = items.indexOf(button),
                                newIndex, index, item;
    
                        for (index = 0; index < length; index++) {
                            item = items[index];
    
                            if (item.reorderable && item.id != button.id) {
                                var box = item.getEl().getBox(),
                                        midpoint = (me.buttonYCache[item.id] || box.y) + (box.height / 2),
                                        movedUp = oldIndex > index && deltaY < 0 && buttonY < midpoint,
                                        movedBottom = oldIndex < index && deltaY > 0 && (buttonY + el.getHeight()) > midpoint;
    
                                if (movedUp || movedBottom) {
                                    me[movedUp ? 'onMovedUp' : 'onMovedBottom'](button, index, oldIndex);
                                    break;
                                }
                            }
                        }
                    },
    
                    endDrag: function () {
                        me.updateButtonYCache();
    
                        el.moveTo(el.getX(), me.buttonYCache[button.id], {
                            duration: me.animationDuration,
                            scope: this,
                            callback: function () {
                                button.resumeEvents();
                                if (button.menu) {
                                    button.menu.un('beforeshow', menuDisabler, me);
                                }
    
                                tbar.fireEvent('reordered', button, tbar);
                            }
                        });
    
                        el.setStyle('zIndex', this.startZIndex);
                    }
                });
            },
    
            onMovedUp: function (item, newIndex, oldIndex) {
                var tbar = this.target,
                        items = tbar.items.items,
                        length = items.length,
                        index;
    
                if (newIndex != undefined && newIndex != oldIndex) {
                    tbar.remove(item, false);
                    tbar.insert(newIndex, item);
    
                    this.updateButtonYCache();
                    for (index = 0; index < length; index++) {
                        var obj = items[index],
                                newY = this.buttonYCache[obj.id];
    
                        if (item == obj) {
                            item.dd.startPosition[1] = newY;
                        } else {
                            var el = obj.getEl();
    
                            el.moveTo(el.getX(), newY, {
                                duration: this.animationDuration
                            });
                        }
                    }
                }
            },
    
            onMovedBottom: function (item, newIndex, oldIndex) {
                this.onMovedUp.apply(this, arguments);
            },
    
            updateButtonYCache: function () {
                var tbar = this.target,
                        items = tbar.items,
                        totalY = tbar.getEl().getBox(true).y;
    
                items.each(function (item) {
                    this.buttonYCache[item.id] = totalY;
                    totalY += item.getEl().getHeight();
                }, this);
            }
        });
        </script>
  6. #6
    Hi,

    That extension works with HBox layout only (it doesn't support dataview because structure of view is unpredictable (a developer defines structure))
  7. #7
    Quote Originally Posted by Vladimir View Post
    Hi,

    That extension works with HBox layout only (it doesn't support dataview because structure of view is unpredictable (a developer defines structure))
    That is not good. Why will it not work for VBox layout. I am building an image viewer, I need to be able to change the page order by dragging the thumbnails that are in a Vertical alignment. Like the way you can drag and drop thumbnails in Adobe Acrobat Professional. Like the way you saw my original example attachment I posted.

    I mean what good does it do to be able only drag an item from the top to the bottom...That is a worthless feature!Click image for larger version. 

Name:	re-order.png 
Views:	139 
Size:	29.2 KB 
ID:	2708

    I need a solution to do this. This is a very high priority for me.
  8. #8
    Hi,

    Sorry, I meant VBox layout (in my sample I used VBox layout)
  9. #9
    So...Using VBOX layout...I will be able to drag and drop images in any order I want...Correct?
  10. #10
    Hi,

    Correct, Did you test my sample?
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Need Help With Drag & Drop Example in VB
    By garrisrd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 12, 2010, 5:34 PM
  2. Drag'n Drop
    By Yannis in forum 1.x Help
    Replies: 1
    Last Post: Oct 28, 2009, 7:14 PM
  3. Drag Drop
    By designworxz in forum 1.x Help
    Replies: 0
    Last Post: Feb 20, 2009, 12:46 AM
  4. [CLOSED] MultiSelect with drag and drop, Drop listener
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 30, 2009, 9:25 AM
  5. Drag & Drop
    By iwen in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 26, 2008, 2:23 PM

Tags for this Thread

Posting Permissions