Dynamic Drag and Drop Problems

19 June, 2008 - 18:13 — nbever

Hi,

Let me start by saying that everything I am attempting to do works when it is hardcoded into the DOM. Our issue is that due to the dynamic nature of our application, we cannot do this and must set everything up dynamically through Javascript.

That being said - the issue is that while we can drag our items they are not allowed to be dropped even though the dragReceive proprety of the target matches the dragItem value of the selection.

Here's the setup:

We have an array of workspaces that get dynamically constructed at load time. These are extensions of the NavBox widget and a method called "addPortlet" has been defined which will add and arrange portlets within the nav box.

Once the nav bos is created and placed, it makes a call to the server to load an unknown number of portlets. When a portlet is returned it is added via the "addPortlet" function. This function makes a copy of the portlet and inserts it into the DOM.

At this time we need to add the following items to our portlet:
a dragConstraint of "../..",
a dragReceive value that only accepts items within this nav box (I'm using the label value),
and a dragItem or Group that matches the value for dragReceive.

(the drag behavior is already added in the portlets' constructor).

The idea is that any portlet in the nav box can be drug into another portlet in the same nav box.

The code I'm using to acheive this is:

var newSb = bb.command.copy( springboard, bb.getControllerFromModel( lDiv ), mode );

newSb.setAttributeNS( 'http://www.backbase.com/2006/btl', 'dragConstraint', '../..' );

newSb.setAttributeNS( 'http://www.backbase.com/2006/btl', 'dragReceive', this.getAttribute( 'label' ) );

newSb.setAttributeNS( 'http://www.backbase.com/2006/btl', 'dragItem', this.getAttribute( 'label' ) );

The behvaior we see after all of this is done is that the portlets will drag without problem, and obey the dragConstraint value. However, they are unable to be dropped on any other portlet.

What am I missing / what would cause this behavior? The code is obviously more complicated and it's possible that another component is ruining this for us, but I really would appreciate any possible cause that can be dreamed up so that I can direct my search.

Thanks,
-Nate

Some of the attribute you

20 June, 2008 - 09:28 — Sjoerd

Some of the attribute you mention are in the default (null) namespace and not in the btl namespace, only dragReceive is in the BTL namespace

newSb.setAttribute('dragConstraint', '../..' );

newSb.setAttribute('dragItem', this.getAttribute( 'label' ) );

//Only dragReceive is in the BTL namespace

newSb.setAttributeNS('http://www.backbase.com/2006/btl', 'dragReceive', this.getAttribute( 'label' ) );

Still doesn't accept drop

20 June, 2008 - 17:24 — nbever

Thank you for your reply - I implemented these changes but I still cannot drop the widget. Are there any issues with adding the target information after the creation and copy?

I also tried to hard coded the the dragReceive of the protlets to "*" and this allowed the drop - however, once I did a bb.command.copy to one of the portlets I lost the ability to "drop" as well. Does copy do something to the DOM that messes with the dragReceive functionality?

Thanks a lot for your attention to this strange issue.
-Nate

Solution

2 July, 2008 - 23:51 — nbever

I received this information from Kevin today and it worked so if anyone that is interested:

"Nate,

When using setAttributeNS you still need to include the namespace before the colon. The following should work correctly:

this.setAttributeNS( 'http://www.backbase.com/2006/btl', 'b:dragReceive', '*' );
this.setAttribute( 'dragConstraints', '..' );

-Kevin"

I have a simlar issue

8 August, 2008 - 17:57 — tordona

But it's a drag issue, not a drop issue. Am working on a new piece for our application. Due to it's nature, it requires dynamically building elements and inserting them into the document.

The output is fairly basic an should look like:

<div e:behavior="b:drag" dragItem="userInfo">Some user information here</div>

The creating method looks like:

var container = bb.document.createElementNS('http://www.w3.org/1999/xhtml', 'div');

container.viewNode.innerHTML = 'Some user information here';

container.setAttribute('dragItem', 'userInfo');

container.setAttribute('dragMode', 'symbol');

container.setAttribute('dragSymbol', '.');

container.setAttribute('xmlns:b', "http://www.backbase.com/2006/btl");

container.setAttributeNS('http://www.backbase.com/2006/xel', 'e:behavior', 'b:drag');

controller.appendChild(container);

The new element is inserted correctly without incident. The drag works fine in IE6 and IE7. But with Opera or FF, I receive the following:

TDL: Behavior 'b:drag' was not found

Any ideas what's going on or what I'm missing?

nevermind

8 August, 2008 - 21:13 — tordona

Nevermind. Figured it out. I used bb.setBehavior instead of setAttributeNS

Client Framework