/    Sign up×
Community /Pin to ProfileBookmark

Scriptaculous Question

Copy linkTweet thisAlerts:
Nov 06.2007

I dont know if any of you work with scriptaculous drag+drop a lot, but I have a question that has stumped me for weeks and I am super frustrated!

I am trying to fill “containment” with a JS array, but can’t get it to work. I have a JS array of IDs (I can make it an array of objects if need be):

var contArray = new Array();
contArray.push(‘DESKTOP’);

And I am setting it like this:

containment: contArray,

No dice…

I know the syntax is:

containment: [“item1”, “item2”, “item3”],

But I cant find a way to make that dynamic.

Any ideas? Thanks in advance!

(Also, containment only works for direct children correct? Not for all children and grandchildren etc, right?)

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebnerdNov 06.2007 — Is your DESKTOP the ID of a <ul> tag?
Copy linkTweet thisAlerts:
@benhaynesauthorNov 06.2007 — A DIV tag.
Copy linkTweet thisAlerts:
@WebnerdNov 06.2007 — So, what isn't working? Can you drag the element? Does it not drop on the target? Sometimes if the target has no vertical space, the browser can't find a spot to drop into. Add a <br> tag or some vertical space to the Droppable and see if that helps.
Copy linkTweet thisAlerts:
@benhaynesauthorNov 06.2007 — The containment attribute is supposed to limit what can be dragged into the droppable. It only allows children of the ID/OBJECT listed... this works. But when I try to make the containment attribute set to an array it no longer works.

Here is my code:

[CODE]
var contArray = new Array();
contArray.push('DESKTOP');
contArray.push('WINDOW');

Droppables.add('DESKTOP', {
accept: 'ICON',
containment: contArray,
hoverclass: 'DESKTOP_HOVER',
onDrop: function(OBJECT, PARENT){
$('DEBUG').innerHTML = 'Dropped ' + OBJECT.id + ' onto Desktop.';
transferOBJECT(OBJECT, PARENT);
}
});
[/CODE]

That doesnt work, the syntax is supposed to be:

[CODE]
Droppables.add('DESKTOP', {
accept: 'ICON',
containment: ['DESKTOP', 'WINDOW'],
hoverclass: 'DESKTOP_HOVER',
onDrop: function(OBJECT, PARENT){
$('DEBUG').innerHTML = 'Dropped ' + OBJECT.id + ' onto Desktop.';
transferOBJECT(OBJECT, PARENT);
}
});
[/CODE]
×

Success!

Help @benhaynes spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...