Ayan Dutta Ayan Dutta

Need to create a 'drop aware' rectangle using dojox.gfx

Hi,
I am trying to implement drag and drop functionality with dojox.gfx .
Drag is not an issue for me ,main trouble is with the drop feature.

I am explaining the problem in details below ...

I have just two shapes ...one rectangle (say target ) and one circle .
The requirement is to detect the event when the circle is dragged and finally dropped on the rectangle (if dropped elsewhere just do not need to do anything) .

I have explored the 'onMoveStop' event of dojox.gfx and made a bit of progress with it
but still not being able to implement the functionality . I can detect when the circle drag stops , but can not detect when it is dropped on the rectangle .

I want to make the rectangle as 'drop aware' ...such that when any shape is dropped on it,it can detect .

I think I am pretty close to the solution ,I can detect the drag start and end so far .
I am giving the code I have written so far .
I have attached the code below .
If somebody has any knowledge/idea regarding this ,please help

Regards,
Ayan

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Testing simple drop feature of Dojox.gfx</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "dojo/resources/dojo.css";
@import "dijit/tests/css/dijitTests.css";
</style>

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript" djConfig="isDebug: true, parseOnLoad: true,gfxRenderer:'svg,silverlight,vml'"></script>
<!--
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true,gfxRenderer:'svg,silverlight,vml'"></script>
-->
<script type="text/javascript">
dojo.require("dojox.gfx");
dojo.require('dojox.gfx.move');
var container = null,
surface = null,
surface_size = null;

function createSurface()
{
container = dojo.byId("gfx_holder");
surface = dojox.gfx.createSurface(container, 500, 500);
surface_size = {width: 500, height: 500};


var rect = surface.createRect({ x: 120, y: 110, height: 200, width: 200})
.setFill([0,0,255,0.3])
.setStroke({ color: "blue", width: 2})
;
// make the rectangle draggable
var rectangleObj=new dojox.gfx.Moveable(rect);

var circle = surface.createCircle({cx: 50, cy : 50, r: 25})
.setFill("yellow").setStroke({color: "red", width: 3});
// make the shape draggable
var circleObj =new dojox.gfx.Moveable(circle);

circle.id='circle';
rect.id='rectangle';


// custom event processing drag starts
dojo.connect(circleObj, "onMoveStart", function(mover, shift)
{
console.log('circle drag started ...');

});

// custom event processing drag stops
dojo.connect(circleObj, "onMoveStop", function(mover, shift)
{
console.log('circle drag stopped ...');

});

rect.connect('onmouseover',rectangleMouseOver);

// cancel text selection and text dragging
dojo.connect(container, "ondragstart", dojo, "stopEvent");
dojo.connect(container, "onselectstart", dojo, "stopEvent");


}

function rectangleMouseOver(event)
{
console.log('onmouseover received by rectangle.');
}

dojo.addOnLoad(createSurface);


</script>
<style>
#gfx_holder { height:500px;border:1px solid #ccc;width: 500px; border: 2px solid blue; float: left}
</style>

</head>

<body>
<div id="gfx_holder"></div>
</body>
</html>

Patrick Schwenk Patrick Schwenk PremiumModerator

BASTA! 10 - .NET Everywhere

BASTA! 2010
20.- 24. September 2010, Rheingoldhalle Mainz

Sehr geehrte Damen und Herren,

hiermit möchte ich Ihnen gerne unsere Konferenz, die BASTA! präsentieren. Die europäische Konferenz rund um die .NET-Technologie!
Die BASTA! ist bekannt für ihre ungeheure Expertendichte - kaum eine Konferenz in Europa bietet eine so hohe Anzahl an Speakern, die als Spezialisten in ihrem jeweiligen Fachgebiet bekannt sind. Das Advisory Board der BASTA! ist wieder gespickt mit den Stars der .NET-Szene. In Form von Best Practices, Hands-on Power Workshops und interessanten Sessions bieten Ihnen namhafte nationale und internationale .NET-Experten, wie Dominick Baier, Richard Blewett, Andrew Clymer, Dr. Holger Schwichtenberg, Manfred Steyer oder Oliver Sturm Tipps, Ideen, Unterstützung und Antworten für Ihre laufenden und zukünftigen Projekte.
Im Mittelpunkt aller Vorträge und Workshops steht der echte Praxisnutzen für die Teilnehmer: Nützliche Programmiertipps, interessante Einblicke in neue Technologien und der Austausch mit anderen Fachleuten. Eine Mischung, die Teilnehmer seit vielen Jahren begeistert.
Dabei ist es nicht verwunderlich, dass sich die .NET-Technologie so großer Beliebtheit erfreut: Schließlich lässt die .NET-Plattform keine Wünsche offen. Ob Desktop-, Konsolen-, Web-, mobile Anwendungen oder Cloud Computing – Alles ist machbar, denn .NET ist überall zu Hause.
So gibt es mit ASP.NET, AJAX und Silverlight das Web 2.0 auch auf .NET-Basis. Mit Compact Framework und Micro Framework wiederum findet .NET Platz auf allen möglichen und unmöglichen Geräten und mit XNA hat es schließlich auch die Welt der Spiele-Programmierung erobert. SOA ist bei Microsoft ebenfalls kein Fremdwort mehr und wird mit dem SQL Server Modeling bedient.
Die BASTA! erschöpft sich aber nicht nur in .NET-Themen. Auch in diesem Jahr findet wie gewohnt parallel die SQLCON rund um den SQL Server statt. Das Thema SharePoint wird hingegen auf der Teilkonferenz ShareConnect in allen Einzelheiten behandelt.

„TAG FÜR TAG“ DIE SPECIAL DAYS DER BASTA!:

Hier eine kleine Vorschau:

. WPF Day
. Azure Day
. Silverlight Day
. Team Dev Day
. ALT.NET Day
. Architecture/ALM Day
• C# Days
• Visual Basic Days
• Agile Days
• SAP .NET Day

Alle Informationen zur BASTA! 2010 finden Sie unter: http://www.basta.net , http://www.twitter.com/bastacon, https://www.xing.com/events/basta-2010-480617, http://www.facebook.com/group.php?gid=264658941676

Haben Sie Fragen zur BASTA! 2010?

Unter info@basta.net stehen wir Ihnen gerne zur Verfügung oder unter der Telefonnummer 069 630089-0.

Mit besten Grüßen,

für das BASTA! Team
Patrick Schwenk & Christian Fleischer
------------------------------------------