PDA

View Full Version : [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.
http://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>