PDA

View Full Version : [CLOSED] Sprite cannot drag in others browser then IE 10



Joe
Dec 30, 2013, 6:38 AM
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:-

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.
The draggable sprite only work on IE10, any previous IE version or browsers not able to do so.

Daniil
Dec 30, 2013, 7:05 AM
Hi @joe,

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

Joe
Jan 02, 2014, 5:03 AM
Hi Daniil,

Attached code demo how I implement in my code.


Server side code will load and create a sprite for the Side Map. (suppose to be dynamically from db)
Client side will create the dots on this Site Map. (Suppose load from DB at server side)
When sprite create, i have set draggable to true. So when page loaded those green dots will be draggable.
(Issue 1) In IE10 all seem fine, but Chrome and before IE 10 are not able to drag it.
(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.DocumentRe ady.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
Jan 04, 2014, 6:04 AM
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.DocumentRe ady.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
Jan 07, 2014, 4:02 AM
The fix has been committed to the SVN trunk in the revision #5592.

Thank you for the report.

Daniil
Jan 08, 2014, 9:43 AM
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
Jan 10, 2014, 1:18 PM
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
Jan 10, 2014, 2:40 PM
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/#!/api/Ext.EventObject-method-getX
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.EventObject-method-getY
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.EventObject-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
Jan 22, 2014, 3:17 AM
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
Jan 22, 2014, 4:26 AM
1), 2) - are you using exactly the Vladimir's example to test with?
http://forums.ext.net/showthread.php?27690&p=123340&viewfull=1#post123340

If no, please provide an exact sample.

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

Joe
Jan 23, 2014, 2:54 AM
Hi Daniil,

Vladimir just added few line in my code for the Lock and Unlock the sprite. Basically that is my code I provided and using it in my project.

Ext.override to Ext.dd.DragDropManager should has no affect on my new question.

Daniil
Jan 23, 2014, 3:34 AM
Ok.

To get a sprite's coordinates, I think you can use:

this.dragData.sprite.el.getX();
this.dragData.sprite.el.getY();


4) Is there a way to snap the center of sprite to the mouse x,y when drag?

Well, I think it might be possible to position it on start of dragging. Though, at first attempts I was unable to get it working. But I think you don't need it anymore since you've got the answer of the main question about a sprite's position, right?

Joe
Jan 27, 2014, 3:29 AM
Hi Daniil,

The solution dose working now. It give the top,left position of the sprite. I just workout the offset.

Thanks.