Drag & Drop - update the value of input elements

Submitted by sgerbeth on Thu, 03/06/2008 - 18:33.

Hi,

i have some problems with dojo.dnd. I want to implement the Drag & Drop Funtion with JavaScript, so that the dnd items will be generated dynamicly and i can change the positions of them in the container. And now the problem:

when i include some input elements into the items, change the values and move the items, they wont be updated at the avatar. Why? Can someone help me?

Thanks

The Code

index.html

<head>
<title>First Widget</title>
<script type="text/javascript" src="lib/dojo/dojo.js"></script>
<script type="text/javascript" src="onLoad.js"></script>
<style>
div#containerFilter {
width: 300px;
height: 200px;
border: 1px solid black;
}
.dojoDndItem {
width: 300px;
display: block;
background-color: #00ff00;
}
.footer {
background-color: #0000ff;
height: 10px;
}
.header {
background-color: #ff0000;
}
.dojoDndAvatarHeader {
display: none;
}
</style>
</head>
<body>
<div class="container" id="containerFilter"></div>
</body>

onLoad.js

djConfig = {
isDebug: true,
parseOnLoad: true
};

dojo.require( 'dijit._Widget' );
dojo.require( 'dojo.parser' );
dojo.require("dojo.dnd.Source");
dojo.require("dojo.dnd.Manager");
dojo.require("dojo.dnd.Avatar");
dojo.require("dojo.dnd.Selector");
dojo.require("dojo.dnd.Container");

dojo.require( 'tribal.widget.filterSearch' );
dojo.require( 'tribal.widget.filterCalendar' );

function nodeCreator( data, hint ) {
var box = dojo.doc.createElement( 'div' );
box.id = data.id;
createHeader( box, data.headline );
createContent( box, data.widget );
createFooter( box );
return { node: box, data: data, type: [ 'item' ]};
};

function createHeader( box, headline ) {
var element = box.appendChild( dojo.doc.createElement( 'div' ) );
element.id = dojo.dnd.getUniqueId();
element.className = 'dojoDndHandle header';
element.innerHTML = headline;
return element;
}

function createContent( box, widget ) {
var element = box.appendChild( dojo.doc.createElement( 'div' ) );
element.className = 'content';
new widget( { prefix: 'Foo', suffix: 'Bar' }, element );
return element;
}

function createFooter( box ) {
var element = box.appendChild( dojo.doc.createElement( 'div' ) );
element.className = 'footer';
return element;
}

dojo.addOnLoad( function() {
var data = [
{
id: 'filterSearch1',
headline: 'Search1',
widget: filterSearch
}, {
id: 'filterSearch2',
headline: 'Search2',
widget: filterSearch
}
];
var dndSource = new dojo.dnd.Source(
'containerFilter', {
creator: nodeCreator,
accept: [ 'item' ],
withHandles: true,
copyOnly: false,
skipForm: true
}
);
dndSource.insertNodes( null, data );
} );

filterSearch.js

if( !dojo._hasResource[ 'tribal.widget.filterSearch' ] ) {
dojo._hasResource[ 'tribal.widget.filterSearch' ] = true;
dojo.provide( 'tribal.widget.filterSearch' );

dojo.declare(
'filterSearch',
[ dijit._Widget ],
( function() {
function preamble(){}

function constructor(){
this.createWidget = createWidget;
}

function postMixInProperties(){}

function postCreate(){
this.createWidget();
}

function createWidget( data ) {
var text = this.domNode.appendChild( dojo.doc.createElement( 'input' ) );
text.id = dojo.dnd.getUniqueId();
text.name = 'test';
text.value = 'hello';
return this.domNode;
}

return {
prefix: '',
suffix: '',
preamble: preamble,
constructor: constructor,
postMixInProperties: postMixInProperties,
postCreate: postCreate
}
} )()
);

}

Login or register to post comments
Unsubscribe post

Avatar is a temporary

Submitted by eugene on Fri, 03/07/2008 - 18:57.

Avatar is a temporary snapshot, which lives only between the drag and the drop. It is a simple object, which is not updated dynamically.

Hmm, can you explain me how

Submitted by sgerbeth on Sat, 03/08/2008 - 10:46.

Hmm, can you explain me how to update the avatar manually? is there a tutorial or anything else?

Cheers

Ok i've found the fault. The

Submitted by sgerbeth on Sun, 03/09/2008 - 14:41.

Ok i've found the fault.

The Avatar.js recreate the avatar and don't clone the node, when a creator is defined.

var node = source.creator ? node = source._normalizedCreator(source.getItem(this.manager.nodes[i].id).data, "avatar").node : node = this.manager.nodes[i].cloneNode(true);

So I have overwritten the constructor of the Avatar.js to clone the node everytime.

if( !dojo._hasResource[ 'tribal.overwrite.Avatar' ] ) {
dojo._hasResource[ 'tribal.overwrite.Avatar' ] = true;
dojo.provide( 'tribal.overwrite.Avatar' );

dojo.require( 'dojo.dnd.Avatar' );

dojo.declare( 'dojo.dnd.Avatar', dojo.dnd.Avatar, {
construct: function(){
var a = dojo.doc.createElement( 'table' );
a.className = 'dojoDndAvatar';
a.style.position = 'absolute';
a.style.zIndex = 1999;
a.style.margin = '0px';
var b = dojo.doc.createElement( 'tbody' );
var k = Math.min( 5, this.manager.nodes.length );
var source = this.manager.source;
for( var i = 0; i < k; ++i ) {
tr = dojo.doc.createElement( 'tr' );
tr.className = 'dojoDndAvatarItem';
td = dojo.doc.createElement( 'td' );
var node = this.manager.nodes[ i ].cloneNode( true );
node.id = '';
td.appendChild( node );
tr.appendChild( td );
dojo.style( tr, 'opacity', ( 9 - i ) / 10 );
b.appendChild( tr );
}
a.appendChild( b );
this.node = a;
}
} );
}

Cheers

Yes, this is the special

Submitted by eugene on Mon, 03/10/2008 - 04:45.

Yes, this is the special provision to provide a different (e.g., abbreviated) representation of the dragged object(s).

In fact the whole DnD infrastructure was written with customization in mind. It is not just supplying different parameters (like the creator function), but also a special code structure, so users can replace/customize relevant parts easily. It is totally open for monkeypatching or subclassing, or using with events and topics.