I am trying to drag TitlePane widgets from one container to another. If I set the copyOnly attribute to false and the drag and drop performs a move operation the TitlePane behaves as expected in it's new location. If the copyOnly attribute is set to true and a copy of the TitlePane is placed in the new location it does not respond. That is, it does not open (or close if it was copied while open).
I am not sure whether this is a dijit issue or a DnD issue but since it does work when moved I was thinking it might be related to the TitlePane itself.
I have compared the markup of the copied TitlePane to that of the original TitlePane and except for the id attribute they appear to be the same.
Following is an example that should show this behavior:
P.S. Am I supposed to be responsible for going through the copied nodes and managing the ids? If so, where do I 'plugin' to access the copied nodes?
<title>TitlePane/DnD Test</title>
<link rel="stylesheet" type="text/css"
href="../js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css"
href="../js/dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
href="../js/dojo/dojo/resources/dnd.css" />
<script
type="text/javascript"
djConfig="parseOnLoad:true"
src="../js/dojo/dojo/dojo.js">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.dnd.Source");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.addOnLoad(function( ) {
dojo.subscribe("/dnd/source/over", function(source) {
console.log("/dnd/source/over", source);
});
dojo.subscribe("/dnd/start", function(source, nodes, copy) {
console.log("/dnd/start", source, nodes, copy);
});
dojo.subscribe("/dnd/drop", function(source, nodes, copy) {
console.log("/dnd/drop", source, nodes, copy);
});
dojo.subscribe("/dnd/cancel", function( ) {
console.log("/dnd/cancel");
});
});
</script>
</head>
<body class="tundra">
<div id="titleSource"
dojoType="dojo.dnd.Source"
class="container"
copyOnly="true"
selfAccept="false"
style="border: medium double rgb(0,250,255)"
accept="none"
creator="dndCreator">
<div class="dojoDndItem">foo</div>
<div class="dojoDndItem">bar</div>
<div dojoType="dijit.TitlePane"
title="title pane: top"
class="dojoDndItem"
dndType="bundle"
id="bundle_1">
<div dojoType="dojo.dnd.Source"
class="container"
isSource="true"
copyOnly="false"
selfAccept="false"
accept="none"
creator="dndCreator">
<div dojoType="dijit.TitlePane"
title="one"
class="dojoDndItem"
open="false"
dndType="variable"
id="variable_1">one</div>
<div dojoType="dijit.TitlePane"
title="two"
class="dojoDndItem"
open="false"
dndType="variable"
id="variable_2">two</div>
<div dojoType="dijit.TitlePane"
title="three"
class="dojoDndItem variable"
open="false"
dndType="variable"
id="variable_3">three</div>
</div>
</div>
</div>
<div id="source1"
dojoType="dojo.dnd.Source"
class="container"
style="border: medium double rgb(250,0,255)">
<div class="dojoDndItem">foo</div>
<div class="dojoDndItem">bar</div>
</div>
</body>
Thanks, any help is appreciated.
tim
I did a little more looking at the copied content, a single TitlePane with no child panes is copied with a new unique id but child TitlePanes of a copied TitlePane are copied with the original id.
I don't think ids are the problem
I simplified this a bit and removed all child TitlePanes. In this situation the copied object (TitlePane) has a unique id but still the toggle function does not work.
Again I compared the original with the copy and other than the id they are identical.
I think I am stuck.
Resolved
I guess I didn't completely understand the creator function. Below is a working example in case anyone else comes across this and is interested in the solution.
<title>TitlePane/DnD Test 2</title>
<link rel="stylesheet" type="text/css"
href="../js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css"
href="../js/dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
href="../js/dojo/dojo/resources/dnd.css" />
<link rel="stylesheet" type="text/css"
href="../style/base.css" />
<script
type="text/javascript"
djConfig="parseOnLoad:true, isDebug:true"
src="../js/dojo/dojo/dojo.js.uncompressed.js">
</script>
<script
type="text/javascript"
src="../js/dojo/dojo/dnd/Source.js">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.dnd.Source");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.addOnLoad(function( ) {
populateCopySource();
populateMoveSource();
dojo.subscribe("/dnd/source/over", function(source) {
console.log("/dnd/source/over", source);
});
dojo.subscribe("/dnd/start", function(source, nodes, copy) {
console.log("/dnd/start", source, nodes, copy);
});
dojo.subscribe("/dnd/drop", function(source, nodes, copy) {
dojo.forEach( nodes, function(node){console.log( node );});
console.log("/dnd/drop", source, nodes, copy);
});
dojo.subscribe("/dnd/cancel", function( ) {
console.log("/dnd/cancel");
});
});
</script>
<script type="text/javascript">
function populateCopySource()
{
console.log( "populating the copy source" );
var srcContainer = dijit.byId( "copyContainer" );
var dndSrcNode = dojo.doc.createElement( "div" );
var dndSrc = new dojo.dnd.Source( dndSrcNode, {
isSource : true,
copyOnly : true,
selfCopy : false,
selfAccept : false,
autoSync : true,
creator : dndCreator,
accept : []
} );
for( counter = 3; counter > 0; counter-- )
{
console.log( "creating title pane " + counter + " for copy" );
var paneInfo =
{title: "copy pane " + counter,
open : false,
children : [
{ title : "copy pane " + counter + " child 1",
open : false
},
{ title : "copy pane " + counter + " child 2",
open : false
},
{ title : "copy pane " + counter + " child 3",
open : false
}
]};
dndSrc.insertNodes( false, [paneInfo] );
}
srcContainer.domNode.appendChild( dndSrcNode );
}
function populateMoveSource()
{
console.log( "populating the copy source" );
var srcContainer = dijit.byId( "moveContainer" );
var dndSrcNode = dojo.doc.createElement( "div" );
var dndSrc = new dojo.dnd.Source( dndSrcNode, {
isSource : true,
copyOnly : false,
selfCopy : false,
selfAccept : false,
autoSync : true,
creator : dndCreator,
accept : []
} );
for( counter = 3; counter > 0; counter-- )
{
console.log( "creating title pane " + counter + " for move" );
var paneInfo =
{ title : "move pane " + counter,
open : false,
children : [
{ title : "move pane " + counter + " child 1",
open : false
},
{ title : "move pane " + counter + " child 2",
open : false
},
{ title : "move pane " + counter + " child 3",
open : false
}
]};
dndSrc.insertNodes( false, [paneInfo] );
}
srcContainer.domNode.appendChild( dndSrcNode );
}
function dndCreator( item, hint )
{
console.log( "dndCreator for " + hint );
console.log( item );
var node = dojo.doc.createElement( "div" );
var nodePane = new dijit.TitlePane( {title: item.title, open: item.open }, node );
var sourceContainer = dijit.byId( "mainContainer" );
sourceContainer.domNode.appendChild( nodePane.domNode );
if( item.children && item.children.length > 0 )
{
var childDnDNode = dojo.doc.createElement( "div" );
nodePane.setContent( childDnDNode );
var childDnDSrc = new dojo.dnd.Source( childDnDNode,
{
isSource : true,
copyOnly : true,
selfCopy : false,
selfAccept : false,
autoSync : true,
creator : dndCreator,
accept : [] } );
childDnDSrc.insertNodes( false, item.children );
}
// var childContentNode = dojo.doc.createElement( "div" );
// var childContentPane = new dijit.layout.ContentPane({}, childContentNode );
// dojo.forEach( item.children,
// function( child, index ){
// var childNode = dojo.doc.createElement( "div" );
// var childNodePane = new dijit.TitlePane( {title: child.title, open: child.open }, node );
// childContentPane.domNode.appendChild( childNodePane.domNode );
// } );
// nodePane.setContent( childContentPane.domNode );
var returnNode = nodePane.domNode;
if( hint == "avatar" )
{
dojo.dnd._createSpan(returnNode.innerHTML)
}
return {node: returnNode, data: item, type: ["bundle", "field"]}
}
</script>
</head>
<body class="tundra">
<div id="mainContainer"
jsId="mainContainer"
dojoType="dijit.layout.BorderContainer"
design="headline"
style="width:100%; height: 100%;">
<div id="copyContainer"
jsId="copyContainer"
dojoType="dijit.layout.ContentPane"
region="left"
style="width:48%; height: 46%; border: medium double rgb(0,255,255)">
Copy from this container
<!--div id="copySrc"
jsId="copySrc"
dojoType="dojo.dnd.Source"
copyOnly="true"
selfAccept="false">
This is the copyable source
</div-->
</div>
<div id="moveContainer"
jsId="moveContainer"
dojoType="dijit.layout.ContentPane"
region="center"
splitter="true"
style="width:48%; height: 46%; border: medium double rgb(255,0,255)">
Move from this container
<!--div id="MoveSrc"
jsId="MoveSrc"
dojoType="dojo.dnd.Source"
copyOnly="false"
selfAccept="true">
This is the moveable source
</div-->
</div>
<div id="targetContainer"
jsId="targetContainer"
dojoType="dijit.layout.ContentPane"
region="bottom"
splitter="true"
style="width:100%; height: 46%; border: medium double rgb(255,255,0)">
<div id="targetSrc"
jsId="targetSrc"
dojoType="dojo.dnd.Source"
copyOnly="false"
selfAccept="true"
creator="dndCreator"
accept="bundle">
Target (Source) container
<script type="dojo/connect" event="onDndDrop" args="source, nodes, copy">
console.log( nodes.length + " items from " + source + (copy ? " copied" : " moved") + " to target" );
</script>
</div>
</div>
</div>
</body>