[CLOSED] Sprite cannot drag in others browser then IE 10

[Joe]

I have the following code create list of Dots to be drag by user. Following code draw draggable sprite.

for (var viX = olZoneInfo.length - 1; viX >= 0; --viX) {
                oNewSprite = App.edrawSiteMap.surface.add({
                    id: olZoneInfo[viX].prsDeviceID + '_' + olZoneInfo[viX].prsiZoneID,
                    type: 'circle',
                    draggable: true,
                    fill: 'blue',
                    group: 'ZoneAlert',
                    radius: 10,
                    x: olZoneInfo[viX].priZoneX,
                    y: olZoneInfo[viX].priZoneY,
                    listeners: {
                        mouseover: { fn: fnZoneMouseOver },
                        mouseout: { fn: fnZoneMouseOut }
                    }
                });
                oNewSprite.show(true);
                oNewSprite.priIndex = viX;
                oNewSprite.dd.endDrag = function (oEIn) {
                    fnZoneAlertOnDragEnd(
                        this.dragData.sprite,
                        oEIn.getX(),
                        oEIn.getY()
                        );
                }
            }

Problem:-

1. I cant seem to make a sprite draggable until I clear all sprite and redraw with the draggable=true option as show above. Setting that option wont do.
2. The draggable sprite only work on IE10, any previous IE version or browsers not able to do so.

[Daniil]

Hi @joe,

Could you, please, provide a full sample to reproduce?

[Joe]

Hi Daniil,

Attached code demo how I implement in my code.

1. Server side code will load and create a sprite for the Side Map. (suppose to be dynamically from db)
2. Client side will create the dots on this Site Map. (Suppose load from DB at server side)
3. When sprite create, i have set draggable to true. So when page loaded those green dots will be draggable.
4. (Issue 1) In IE10 all seem fine, but Chrome and before IE 10 are not able to drag it.
5. (Issue 2) Line 28 at Client Side Code; It should be draggable = false. When dblclick it then only set draggable = true and change to blue color. Complete drag it will be back to draggable = false and set color back to green. BUT it will create error due to dd is undefined.

Server side code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

namespace xClient.App
{
	public partial class WebForm1 : System.Web.UI.Page
	{
		protected void Page_Load(object sender, EventArgs e)
		{
			_fnInitializeSiteMap();
		}

		private void _fnInitializeSiteMap()
		{
			Sprite osprBackground = edrawSiteMap.GetSprite("BG");
			osprBackground.X = 0;
			osprBackground.Y = 0;
			osprBackground.Width = 600;
			osprBackground.Height = 400;
			osprBackground.Type = SpriteType.Image;
			osprBackground.Src = "../Images/iwk_layout.PNG";
			osprBackground.Show();
			osprBackground.Redraw();
		}

		[DirectMethod(Namespace = "xClient", Timeout = 120000)]
		public List<clsZoneInfo> fnoGetZoneInfoList()
		{
			List<clsZoneInfo> olZoneInfo = new List<clsZoneInfo>();
			Random oRnd = new Random();
			for (int viX = 0; viX < 10; viX++)
			{
				clsZoneInfo oZoneInfo = new clsZoneInfo()
				{
					priZoneX = oRnd.Next(0, 600),
					priZoneY = oRnd.Next(0, 400),
					prsDeviceID = "1000",
					prsiZoneID = Convert.ToInt16(viX),
					prsiZoneTypeID = 1,
					prsZoneDesc = "",
					prsZoneTypeFilename = "",
					prsZoneTypeName = "Zone_" + viX
				};
				olZoneInfo.Add(oZoneInfo);
			}
			return olZoneInfo;
		}


		public class clsZoneInfo
		{
			//public Guid prgidUnitID { get; set; }
			public String prsDeviceID { get; set; }
			public Int16 prsiZoneID { get; set; }
			public Int16 prsiZoneTypeID { get; set; }
			public Int32 priZoneX { get; set; }
			public Int32 priZoneY { get; set; }
			public String prsZoneDesc { get; set; }
			public String prsZoneTypeName { get; set; }
			public String prsZoneTypeFilename { get; set; }
		}

	}
}

Client side code:

<%@ Page Title="" Language="C#" MasterPageFile="~/mtrDefault.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="xClient.App.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" runat="server">
	<% ResourceManager.GetInstance().Listeners.DocumentReady.Handler = "fnDocumentReady();";%>
	<script>
		var olZoneInfo;

		function fnDocumentReady() {
			fnInitialize();
		};

		function fnInitialize() {
			xClient.fnoGetZoneInfoList({
				success: function (olZoneInfoIn) {
					olZoneInfo = olZoneInfoIn;
					fnDrawZoneInfo();
				}
				,
				failure: Ext.emptyFn
			});
		}

		function fnDrawZoneInfo() {
			for (var viX = olZoneInfo.length - 1; viX >= 0; --viX) {
				oNewSprite = App.edrawSiteMap.surface.add({
					id: olZoneInfo[viX].prsDeviceID + '_' + olZoneInfo[viX].prsiZoneID,
					type: 'circle',
					draggable: true,
					fill: 'green',
					group: 'ZoneAlert',
					radius: 10,
					x: olZoneInfo[viX].priZoneX,
					y: olZoneInfo[viX].priZoneY,
					listeners: {
						dblclick: { fn: fnClickToDrag }
					}
				});
				oNewSprite.show(true);
				oNewSprite.priIndex = viX;
				oNewSprite.setAttributes({ draggable: false }, true);
				oNewSprite.draggable = false;
			};
		}

		function fnOnDragEnd(oSpriteIn, viXIn, viYIn) {
			olZoneInfo[oSpriteIn.priIndex].priZoneX = viXIn;
			olZoneInfo[oSpriteIn.priIndex].priZoneY = viYIn;
			oSpriteIn.setAttributes({ fill: 'Green' }, true);
			oSpriteIn.setAttributes({ draggable: false }, true);
			oSpriteIn.draggable = false;
		}
		
		function fnClickToDrag(oSpriteIn) {
			oSpriteIn.setAttributes({ fill: 'Blue' }, true);
			oSpriteIn.setAttributes({ draggable: true }, true);
			oSpriteIn.draggable = true;
			oSpriteIn.dd.endDrag = function (oEIn) {
				fnOnDragEnd(
					this.dragData.sprite,
					oEIn.getX(),
					oEIn.getY()
					);
			}

		}

	</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphMain" runat="server">
	<ext:DrawComponent ID="edrawSiteMap" runat="server" ViewBox="false" StyleSpec="background:white;" Padding="0">
		<Items>
			<ext:Sprite SpriteID="BG" Hidden="true" Type="Image"></ext:Sprite>
		</Items>
	</ext:DrawComponent>
</asp:Content>

[Vladimir]

Hi,

To resolve first issue, please use the following override

Ext.override( Ext.dd.DragDropManager, {


            startDrag: function ( x, y ) {


                var me = this,
                    current = me.dragCurrent,
                    dragEl;


                clearTimeout( me.clickTimeout );
                if ( current ) {
                    current.b4StartDrag( x, y );
                    current.startDrag( x, y );
                    dragEl = current.getDragEl();


                    if ( dragEl && dragEl.dom.className.replace ) {
                        Ext.fly( dragEl ).addCls( me.dragCls );
                    }
                }
                me.dragThreshMet = true;
            }


        } );

We will include that fix in SVN

About second, issue... Do not use draggable directly after sprite creating (use it as config option only)
Just set draggable:true during sprite creation and after that use 'lock/unlock' methods of 'dd' sprite object
Please see the following example

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


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


<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        _fnInitializeSiteMap();
    }


    private void _fnInitializeSiteMap()
    {
        Sprite osprBackground = edrawSiteMap.GetSprite("BG");
        osprBackground.X = 0;
        osprBackground.Y = 0;
        osprBackground.Width = 600;
        osprBackground.Height = 400;
        osprBackground.Type = SpriteType.Image;
        //osprBackground.Src = "../Images/iwk_layout.PNG";
        osprBackground.Show();
        osprBackground.Redraw();
    }


    [DirectMethod(Namespace = "xClient", Timeout = 120000)]
    public List<clsZoneInfo> fnoGetZoneInfoList()
    {
        List<clsZoneInfo> olZoneInfo = new List<clsZoneInfo>();
        Random oRnd = new Random();
        for (int viX = 0; viX < 10; viX++)
        {
            clsZoneInfo oZoneInfo = new clsZoneInfo()
            {
                priZoneX = oRnd.Next(0, 600),
                priZoneY = oRnd.Next(0, 400),
                prsDeviceID = "1000",
                prsiZoneID = Convert.ToInt16(viX),
                prsiZoneTypeID = 1,
                prsZoneDesc = "",
                prsZoneTypeFilename = "",
                prsZoneTypeName = "Zone_" + viX
            };
            olZoneInfo.Add(oZoneInfo);
        }
        return olZoneInfo;
    }




    public class clsZoneInfo
    {
        //public Guid prgidUnitID { get; set; }
        public String prsDeviceID { get; set; }
        public Int16 prsiZoneID { get; set; }
        public Int16 prsiZoneTypeID { get; set; }
        public Int32 priZoneX { get; set; }
        public Int32 priZoneY { get; set; }
        public String prsZoneDesc { get; set; }
        public String prsZoneTypeName { get; set; }
        public String prsZoneTypeFilename { get; set; }
    }
 
</script>


<!DOCTYPE html>


<html>
<head id="Head1" runat="server">
    <title></title>


    <script>
        Ext.override( Ext.dd.DragDropManager, {


            startDrag: function ( x, y ) {


                var me = this,
                    current = me.dragCurrent,
                    dragEl;


                clearTimeout( me.clickTimeout );
                if ( current ) {
                    current.b4StartDrag( x, y );
                    current.startDrag( x, y );
                    dragEl = current.getDragEl();


                    if ( dragEl && dragEl.dom.className.replace ) {
                        Ext.fly( dragEl ).addCls( me.dragCls );
                    }
                }
                me.dragThreshMet = true;
            }


        } );


        var olZoneInfo;


        function fnDocumentReady() {
            fnInitialize();
        };


        function fnInitialize() {
            xClient.fnoGetZoneInfoList( {
                success: function ( olZoneInfoIn ) {
                    olZoneInfo = olZoneInfoIn;
                    fnDrawZoneInfo();
                }
                ,
                failure: Ext.emptyFn
            } );
        }


        function fnDrawZoneInfo() {
            for ( var viX = olZoneInfo.length - 1; viX >= 0; --viX ) {
                oNewSprite = App.edrawSiteMap.surface.add( {
                    id: olZoneInfo[viX].prsDeviceID + '_' + olZoneInfo[viX].prsiZoneID,
                    type: 'circle',
                    draggable: true,
                    fill: 'green',
                    group: 'ZoneAlert',
                    radius: 10,
                    x: olZoneInfo[viX].priZoneX,
                    y: olZoneInfo[viX].priZoneY,
                    listeners: {
                        dblclick: { fn: fnClickToDrag }
                    }
                } );
                oNewSprite.show( true );
                oNewSprite.priIndex = viX;
                oNewSprite.dd.lock();
            };
        }


        function fnOnDragEnd( oSpriteIn, viXIn, viYIn ) {
            olZoneInfo[oSpriteIn.priIndex].priZoneX = viXIn;
            olZoneInfo[oSpriteIn.priIndex].priZoneY = viYIn;
            oSpriteIn.setAttributes( { fill: 'Green' }, true );
            oSpriteIn.dd.lock();
        }


        function fnClickToDrag( oSpriteIn ) {
            oSpriteIn.setAttributes( { fill: 'Blue' }, true );
            oSpriteIn.dd.unlock();
            oSpriteIn.dd.endDrag = function ( oEIn ) {
                fnOnDragEnd(
                    this.dragData.sprite,
                    oEIn.getX(),
                    oEIn.getY()
                    );
            }


        }


    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <% ResourceManager.GetInstance().Listeners.DocumentReady.Handler = "fnDocumentReady();";%>
        <ext:DrawComponent ID="edrawSiteMap" runat="server" StyleSpec="background:white;" Padding="0" ViewBox="false">
            <ToolTips>
                <ext:ToolTip runat="server" Html="html" />
            </ToolTips>
            <Items>
                <ext:Sprite SpriteID="BG" Hidden="true" Type="Image"></ext:Sprite>
            </Items>
        </ext:DrawComponent>
    </form>
</body>
</html>

[Daniil]

The fix has been committed to the SVN trunk in the revision #5592.

Thank you for the report.

[Daniil]

The fix has been corrected in the revision #5595.

Fix

Ext.override(Ext.dd.DragDropManager, {
    startDrag: function (x, y) {
        var me = this,
            current = me.dragCurrent,
            dragEl;

        clearTimeout(me.clickTimeout);

        if (current) {
            current.b4StartDrag(x, y);
            current.startDrag(x, y);
            dragEl = Ext.fly(current.getDragEl());

            if (dragEl && dragEl.dom.className && dragEl.dom.className.replace) { // Fix for http://forums.ext.net/showthread.php?27690
                dragEl.addCls(me.dragCls);
            }
        }

        me.dragThreshMet = true;
    }
});

[Joe]

Dear all,

Thanks for the help and fix.

I do have further question on the sprite topic:-
1) How do I get the mouse x,y relatively to sprite x,y?
2) How to get the sprite x,y after drop?
3) Any example can link me to?

the sample code above do not give correct sprite x,y if using getX, getY method.

[Daniil]

1) How do I get the mouse x,y relatively to sprite x,y?

I think you can get the mouse's x&y from an EventObject (the "e" argument passed to the listeners):
http://docs.sencha.com/extjs/4.2.1/#...ct-method-getX
http://docs.sencha.com/extjs/4.2.1/#...ct-method-getY
http://docs.sencha.com/extjs/4.2.1/#...t-method-getXY

Then you should be able to calculate the relative position.

2) How to get the sprite x,y after drop?

Do you mean this part?

oSpriteIn.dd.endDrag = function ( oEIn ) {
    fnOnDragEnd(
        this.dragData.sprite,
        oEIn.getX(),
        oEIn.getY()
    );
}

Seems the getX and getY calls return the correct coordinates for me. I tried in FireFox.

3) Any example can link me to?

I doubt we have such an example. Though, maybe it exists somewhere on the forums.

[Joe]

Hi, Daniil.

refer to 1) I already get the mouse post using the e object. However, it is not the sprite X, Y. I need to find out the Sprite X,Y offset the mouse X,Y. If not when redraw the sprite using the Mouse X,Y will not be same position where the sprite dropped.

refer to 2) that is return the mouse X,Y position not the sprite X,Y. if we drag the sprite, need to make sure the mouse pointer in the center of the sprite. if not the result will be shifted.

Add question 4) Is there a way to snap the center of sprite to the mouse x,y when drag? Please explain in code if possible.

[Daniil]

1), 2) - are you using exactly the Vladimir's example to test with?
http://forums.ext.net/showthread.php...l=1#post123340

If no, please provide an exact sample.

4) - let's sort out 1) and 2) first.