[CLOSED] Draggable Sprite Events

**paulc** · Sep 13, 2012, 9:44 AM

Hi.

I have a DrawComponent which has some sprites added with 'draggable: true' defined. These sprites can be dragged and drop on the surface fine, but I do not get any events raised at the DrawComponent level, eg:

                            <DraggableConfig runat="server" Constrain="True">
                                <Listeners>
                                    <Drag Handler="console.log('drag')">
                                    </Drag>
                                    <DragStart Handler="console.log('drag-start')">
                                    </DragStart>
                                    <DragEnd Handler="console.log('drag-end')">
                                    </DragEnd>
                                </Listeners>
                            </DraggableConfig>

These events are only fired if the surface has been panned. My question is how can I tell when an individual sprite has been dragged? I don't see any DragEnd/DragStart listeners available at the sprite level.

Markup is:

                <ext:Panel ID="containerCanvas" runat="server" AutoScroll="False">
                    <Items>
                        <ext:DrawComponent runat="server" ID="drawComponent" ViewBox="false" BaseCls="opus-transparency-tile">
                            <Items>
                                <ext:Sprite Type="Image" Src='<%# Model.PreviewImageUrl %>' AutoDataBind="True" Width="760"
                                    Height="760" ZIndex="100" FillOpacity="1" Fill="Red">
                                </ext:Sprite>
                                <ext:Sprite Type="Image" Src='/content/shell/icon/32/note.png' AutoDataBind="True"
                                    Width="32" Height="32" ZIndex="200" Draggable="True">
                                </ext:Sprite>
                            </Items>
                            <Listeners>
                                <Click Handler="console.log('draw-click');console.log(e);">
                                </Click>
                            </Listeners>
                            <DraggableConfig runat="server" Constrain="True">
                                <Listeners>
                                    <Drag Handler="console.log('drag')">
                                    </Drag>
                                    <DragStart Handler="console.log('drag-start')">
                                    </DragStart>
                                    <DragEnd Handler="console.log('drag-end')">
                                    </DragEnd>
                                </Listeners>
                            </DraggableConfig>
                        </ext:DrawComponent>
                    </Items>


                </ext:Panel>

**Daniil** · Sep 13, 2012, 1:53 PM

Hi,

Well, all sprites are dragged as alone, i.e. all together.

Please look at this example.
https://examples2.ext.net/#/Draw/Basic/Tiger/

There are many sprites, but they all are moved simultaneously.

Probably, you should define several DrawComponents.

**paulc** · Sep 13, 2012, 3:27 PM

Well, that isn't my question! I already have multiple sprites dragged individually using one surface. What I want to know is how I get notified when a sprite has been dragged.

**Daniil** · Sep 13, 2012, 3:32 PM

Thank you for clarification.

Could you provide your sample to test with and investigate a possibility to attach drag events for sprites?

**paulc** · Sep 14, 2012, 10:51 AM

Here is a sample.

<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>


<!DOCTYPE html>


<html>
<head runat="server">
    <title>Tiger - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />


     <style>
        .cursor-dragme {
            cursor: move;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <h1>Draggable Tiger Component</h1> 
        <p> 
            The following example shows the classic SVG Tiger.  Because the new Ext.Draw system extends from Component, we get all the functionality available to any component. In this example, the component has been made floatable and draggable while constraining it to the document body. Note that because we use vectors to define the image, it is scalable to any size and is fully resolution independent.
        </p>
        <p>
            See introductory blog post on the topic <a href="http://www.sencha.com/blog/ext-js-4-drawing-charting">here</a>.
        </p>
        <br>


        <ext:DrawComponent runat="server" ViewBox="False" Width="1024" Height="768">
            <DraggableConfig runat="server">
                <Listeners>
                    <DragEnd Handler="alert('dragged');"></DragEnd>


                </Listeners>


            </DraggableConfig>
            <Items>
                <ext:Sprite
	                Type="Image"
	                Src="/resources/images/ext.net-logo.png"
                    Draggable="True"
                    X="100"
                    Y="100"
                    Width="149"
                    Height="33">
                    <Listeners>
<%--                        <DragEnd Handler="alert('dragged');"></DragEnd>
--%>                    
                    </Listeners>


                </ext:Sprite>
                
            </Items>
        </ext:DrawComponent>
    </form>    
</body>
</html>

**Daniil** · Sep 14, 2012, 3:42 PM

Thank you.

I discovered that there is no such built-in possibility.

I can suggest the following solution.

1. Override the Ext.draw.Sprite initDraggable function.

Ext.draw.Sprite.override({
    initDraggable: function() {
        var me = this;
        me.draggable = true;
        //create element if it doesn't exist.
        if (!me.el) {
            me.surface.createSpriteElement(me);
        }
        //me.dd = new Ext.draw.SpriteDD(me, Ext.isBoolean(me.draggable) ? null : me.draggable);
        me.dd = new Ext.draw.SpriteDD(me, me.draggableConfig);
        me.on('beforedestroy', me.dd.destroy, me.dd);
    }
});

2. Set the following CustomConfig for the Sprite.

<ext:Sprite>
    <CustomConfig>
        <ext:ConfigItem Name="draggableConfig" Value="someDragConfig" Mode="Raw" />
    </CustomConfig>
</ext:Sprite>

3. The someDragConfig definition.

var someDragConfig = {
    onBeforeDrag : function () {
        console.log("onBeforeDrag:");
        console.log(arguments);
        return true; // to allow dragging
    },
    onEndDrag : function () {
        console.log("onEndDrag:");
        console.log(arguments);
    }
};

**Daniil** · Dec 29, 2012, 9:10 AM

The following example works with the trunk.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var onBeforeDrag = function () {
            console.log("onBeforeDrag:");
            console.log(arguments);

            return true; // to allow dragging
        };

        var EndDrag = function () {
            console.log("EndDrag:");
            console.log(arguments);
        };

    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:DrawComponent 
        runat="server" 
        ViewBox="False" 
        Width="1024" 
        Height="768">
        <Items>
            <ext:Sprite
                Type="Image"
                Src="/resources/images/test.png"
                X="100"
                Y="100"
                Width="150"
                Height="30">
                <DraggableConfig runat="server">
                    <OnBeforeDrag Fn="onBeforeDrag" />
                    <EndDrag Fn="EndDrag" />
                </DraggableConfig>
            </ext:Sprite>
        </Items>
    </ext:DrawComponent>
</body>
</html>

Thread: [CLOSED] Draggable Sprite Events

Thread Tools

Search Thread

Display

[CLOSED] Draggable Sprite Events

Similar Threads

Resizable & Draggable items

[CLOSED] Draggable Sprite

GMap Marker Draggable

[CLOSED] Calendar - Events missing due to 6 startup ajax calls asking for events on separate dates

Draggable Fieldsets?

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Draggable Sprite Events

[CLOSED] Draggable Sprite Events

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us