Re: Drag a Tree node error

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Drag a Tree node error

Michael Waluk
Another way to do it would be to use the "around" advice that connect() offers.  This is what I did because I didn't want to override the default onDrop, but wanted to augment it with my own function:
 
I extended HtmlDropTarget just like Henrik but just uses the normal node in the constructor.  Instead I used the special "connect" call in the constructor of my new EntityDropTarget:

EntityDropTarget =

function(node, types, onDropFunc) {

    if

(arguments.length == 0) { return; }

    dojo.dnd.HtmlDropTarget.call(this, node, types);

    this.onDropFunc = onDropFunc;

    if (this.onDropFunc) {

        dojo.event.connect("after", this, "onDrop", this, "onDropFunc", this, "addDropTargets");

    }

}

This just forces a call to EntityDropTarget's "addDropTargets" function AFTER any call to its "onDrop" function but BEFORE the now-connected call to its "onDropFunc" function.  The "addDropTargets" method just injects itself into the event (the 1st argument) so that it is there for the "onDropFunc" function to use.
...

dojo.inherits(EntityDropTarget, dojo.dnd.HtmlDropTarget);

dojo.lang.extend(EntityDropTarget,

{
    addDropTargets: function(invocation) {

        invocation.args[0].dropTarget = this;

        return invocation.proceed();

    }
...
 
Now in "onDropFunc" I can juse use

    e.dropTarget.widgetId

to get the ID we all want.
 
I hope it helps, but if anyone sees any issues with this, please let me know.  I am far from a dojo expert right now.
Michael Waluk

 
On 11/17/05, Henrik Hjelte <[hidden email]> wrote:
The problem was to drag-drop to a treeNode, and find out on which one. I
gave a partial solution earlier. I could drag stuff to treeNodes, but
then I could not detect on which tree node it had been dropped. So I
wrote a new class called BlackHoleDropTarget, that takes a widget as
input instead of a dom node. That is because the original div:s, for
example <div dojoType="TreeNode" id="something"> gets converted to a new
div and a javascript widget object, which has the property widgetId set
to "something". The javascript TreeNodes can be found with

  folders=dojo.widget.getWidgetsByType('TreeNode');

Now, give a widget object (not a domNode) to the constructor of
BlackHoleDropTarget.

f=folders[0]; // Probably from a loop
var d = new dojo.dnd.BlackHoleDropTarget(f, [ 'myTypeId' ]);
// Connect the onDelete event to your code
dojo.event.connect(d, 'onDelete', 'dropedStuff');

function dropedStuff(e) {
alert('dropped here:' + e.dropWidget.widgetId);
//We also have e.dragSource
}

Are there simpler / better ways to solve this? Then please comment..
/Henrik Hjelte

Here is the code for BlackHoleDropTarget.js, put it in src/dnd/
then on your page dojo.require('dojo.dnd.BlackHoleDropTarget');

dojo.provide("dojo.dnd.BlackHoleDropTarget");
dojo.require("dojo.dnd.HtmlDropTarget ");
dojo.require("dojo.lang");

dojo.dnd.BlackHoleDropTarget = function(widget, types){
       this.domNode = widget.domNode; //Note widget as input
       this.widget=widget;
       dojo.dnd.DropTarget.call (this);
       this.acceptedTypes = types||[];
}

dj_inherits(dojo.dnd.BlackHoleDropTarget,  dojo.dnd.HtmlDropTarget);

dojo.lang.extend(dojo.dnd.BlackHoleDropTarget, {
       onDrop: function(e) {
               this.onDragOut(e);

               e.dropWidget=this.widget;

               this.onDelete(e);

               dojo.dom.removeNode(e.dragObject.domNode);

               return true;
       },
       onDelete: function(e) {}
});
//End of file



On ons, 2005-11-16 at 19:07 -0500, chaganti krishna wrote:

> thanks, do you have an example to do this.
> Krishna
>
> On 11/16/05, Henrik Hjelte <[hidden email]> wrote:
>         On tis, 2005-11-15 at 12:14 -0500, chaganti krishna wrote:
>         > Drag a Tree node error.
>         > In the following code it fails to drag a tree node.
>         > the tree getById returns a null value.
>         >
>         > I would appriciate if some one can help me to figure out
>         what is the
>         > error I am doing.
>         >
>         I have only just started with dojo, so I'm by no means an
>         expert, but I
>         had exactly the same problem yesterday. Finally using the
>         DOM-Inspector
>         in firefox I saw that the id:s in the tree somehow disappear
>         after
>         dojo:s magical handling of the dojo div:s, so your getById
>         returns null.
>
>         I did a work around,
>         dojo.html.getElementsByClass("dojoTreeNode")
>         I used TreeNode instead of Tree2Node, so you have figure out
>         what the
>         class name for Tree2Node is (probably dojoTree2Node), I saw it

>         in the
>         DOMInspector.
>
>         I think the getElementsByClass can take a second parameter
>         that is the
>         parent of the search, so the method can be used even if you
>         for example
>         have several trees with nodes of different meaning.
>
>         It's on top of my wishlist for documentation: An introduction
>         to how
>         the div dojoType:s work behind the scenes. The only problems I
>         have had
>         with dojo so far are related to when it doesn't work as I
>         expected.
>
>         Otherwise dojo is great. The coding style is really good, and
>         I like the
>         philosophies behind the project and coding.
>
>         /Henrik Hjelte
>
>

>
>         > Regards
>         > Krishna
>         > ============START=========
>         > <?xml version="1.0"?>
>         > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>         > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>         >
>         > <html xmlns=" http://www.w3.org/1999/xhtml"
>         >     xmlns:b="http://www.backbase.com/b "
>         >     xmlns:s=" http://www.backbase.com/s">
>         >
>         >     <head>
>         >         <title>TEST.</title>
>         >         <!-- define  the debug config for DOJO code; -->
>         >         <script type="text/javascript">
>         >                 var djConfig = {isDebug: true};
>         >         </script>
>         >         <!-- include the DOJO code; -->
>         >         <script type="text/javascript"
>         src="dojo/dojo.js"></script>
>         >         <!-- include the Required  code for this
>         page/application; -->
>         >         <script language="JavaScript"
>         type="text/javascript">
>         >
>         dojo.require("dojo.widget.HtmlFloatingPane ");
>         >

>         dojo.require("dojo.widget.HtmlLayoutPane");
>         >
>         dojo.require("dojo.widget.HtmlSplitPane");
>         >
>         dojo.require ("dojo.widget.HtmlResizeHandle ");
>         >                     dojo.require("dojo.widget.Tree2");
>         >                     dojo.require("dojo.dnd.*");
>         >                     dojo.require("dojo.event.*");
>         >
>         >
>         >         </script>
>         >
>         >         <script language="JavaScript"
>         type="text/javascript">

>         >              dojo.dnd.dragManager.nestedTargets = true;
>         >              function getById(id){
>         >                              alert("Getting:"+id);
>         >                              alert("Object :"+
>         > document.getElementById(id));
>         >                     return document.getElementById(id);
>         >             }
>         >
>         >             function createABox()
>         >             {
>         >                alert("This is dropped");
>         >             }
>         >

>         >             function init(){
>         >                     new
>         dojo.dnd.HtmlDragMoveSource(getById("X1"));
>         >                          var dt1 = new
>         > dojo.dnd.HtmlDropTarget(getById("dropArea"), ["*"]);
>         >                     dojo.event.connect(dt1, "onDragOver",
>         > "createABox");
>         >                     new dojo.dnd.HtmlDragMoveSource
>         (getById("X2"));
>         >
>         >                          var dt2 = new
>         > dojo.dnd.HtmlDropTarget (getById("dropArea"), ["*"]);
>         >                     dojo.event.connect(dt2, "onDragOver",
>         > "createABox");
>         >
>         >             }
>         >              // initialize the drag motion
>         >              dojo.event.connect(dojo, "loaded", "init");
>         >         </script>
>         >         <link  type="text/css" rel="style/style.css"></link>
>         >     </head>
>         >     <body>
>         >
>         >     <!-- main window and it shows a good border -->
>         >     <div dojoType="FloatingPane"
>         >             widgetId="mainPanel"
>         >             title="TEST"
>         >             constrainToContainer="1"
>         >             style=" width: 100%;  height: 100%;  left:
>         10px;  top:
>         > 100px;  bottom:1px;  right:1px;" >
>         >
>         >         <!-- whole page is the Covered with mainPanel. named
>         and id'd
>         > with mainPanel -->
>         >         <div dojoType="LayoutPane"
>         >                 title="test"
>         >         layoutChildPriority='left-right'
>         >         style="border: 0px solid black; width: 100%; height:
>         100%;
>         > padding: 1px;">
>         >
>         >             <!-- start Main Panel -->
>         >
>         >             <div dojoType="LayoutPane" layoutAlign="top"
>         >                     style="border: 1px solid black;
>         >                     width: 100%;
>         >                      height: 30px;
>         >                     padding: 0px;
>         >                     background-color: #ffffff;">
>         >              <!-- Top Panel -->
>         >                     top bar
>         >             </div>
>         >
>         >             <div dojoType="LayoutPane" layoutAlign="left"
>         >                 style="background-color: #acb386; width:

>         150px;">
>         >                     <div dojoType="Tree2" id=""
>         title="CHAIN"
>         > toggle="wipe" toggleDuration="500"
>         > publishSelectionTopic="treeSelected">
>         >         <!-- Tree Started -->
>         >         <!-- replace this is dynamic nodes -->
>         >
>         >         <div dojoType="Tree2Node" id="Agentsx"
>         title="Agentsx">x
>         >                     <!-- Agents -->
>         >             x
>         >
>         >             <div dojoType="Tree2Node" id="Logic"
>         title="Logic">x<!--
>         > Logic Start -->
>         >
>         >                         <div dojoType="Tree2Node" id="X1"
>         > title="X1">x
>         >                         </div>
>         >                 <div dojoType="Tree2Node" id="X2"
>         title="X2">x
>         >                         </div>
>         >             </div><!-- Logic End -->
>         >
>         >
>         >         </div><!--Agents-->
>         >     </div><!-- Tree Starting -->
>         >             </div>
>         >
>         >
>         >
>         >         <div dojoType="LayoutPane" layoutAlign="client"
>         > style="background-color: #f5ffbf; padding: 10px;"
>         >                  id="dropArea">
>         >                  darea
>         >         </div>
>         >
>         >
>         >             <div dojoType="LayoutPane" layoutAlign="bottom"
>         >                     style="border: 1px solid black;
>         >                     width: 100%;
>         >                      height: 30px;
>         >                     padding: 0px;
>         >                     background-color: #ffffff;">
>         >                   <!-- Bottom Panel -->
>         >                 bottom bar
>         >             </div>
>         >             </div> <!- Main Panel End -->
>         >             </div> <!-- Main Window End -->
>         >
>         >     </body>
>         >
>         > </html>
>         > ============END=========
>         > _______________________________________________
>         > Dojo-interest mailing list
>         > [hidden email]
>         > http://dojotoolkit.org/mailman/listinfo/dojo-interest
>
>         _______________________________________________
>         Dojo-interest mailing list
>         [hidden email]
>         http://dojotoolkit.org/mailman/listinfo/dojo-interest
>

_______________________________________________
Dojo-interest mailing list
[hidden email]
http://dojotoolkit.org/mailman/listinfo/dojo-interest


_______________________________________________
Dojo-interest mailing list
[hidden email]
http://dojotoolkit.org/mailman/listinfo/dojo-interest
Loading...