...

View Full Version : Create a new droppable area



treeleaf20
03-02-2011, 05:05 PM
All,
I currently have this code:


$("#gallery").droppable({
activeClass: "custom-state-active",
drop: function( event, ui ) {
deleteImage( ui.draggable, $("#gallery") );
}
});


This works fine for me if I have static <div>s to do this. I want to have one on my page so this is fine for now. I want to be able to click a button and when the button is clicked it does two things. Creates a new <div> on my page and also makes it droppable. So I'm guessing I need to find the id of the last <div> and increment it by 1 and then basically have the same code. Then make it droppable? Any guidance would be greatly appreciated. Thanks in advance.

VIPStephan
03-02-2011, 06:36 PM
To add an element onclick you’ll need to use the click() function and append(). Then you’ll probably wanna use each() to address each of the newly appended elements and pass a callback function that can take an index parameter. You may then be able to use index() for deleteImage in the droppable() function.

All these functions are well documented at jQuery’s website.

treeleaf20
03-02-2011, 07:19 PM
Thanks, I tried to do this:


$('<div id="'+$myNum+'" class="ui-widget-content ui-state-default"><h4 class="ui-widget-header"><span class="ui-icon ui-icon-cover">Cover</span> Cover</h4></div>').appendTo('body');
$('#"' + $myNum + '"').droppable({
drop: function( event, ui ) {
deleteImage( ui.draggable, $('#"' + $myNum + '"') );
}
});


It doesn't work though. Any ideas on why this wouldn't work. Just as an FYI, I have a deleteimage to move the image and if I change my code to this it works fine:


$myNum = "one";
$('<div id="'+$myNum+'" class="ui-widget-content ui-state-default"><h4 class="ui-widget-header"><span class="ui-icon ui-icon-cover">Cover</span> Cover</h4></div>').appendTo('body');
$("#one").droppable({
drop: function( event, ui ) {
deleteImage( ui.draggable, $("#one") );
}
});


So my issue is something with the variable.

VIPStephan
03-02-2011, 09:44 PM
Could it be the double quotes?

$('#"' + $myNum + '"')…
As that would translate to #"one" in Realspeak.

venegal
03-02-2011, 10:08 PM
Could it be the double quotes?

$('#"' + $myNum + '"')
As that would translate to #"one" in Realspeak.

Do you guys get that code from some bogus tutorial or something? That's pretty much the same mistake that was in this thread http://www.codingforums.com/showthread.php?t=219665, and you both share that unconventional and confusing use of dollar sign variables for id strings (as opposed to jQuery objects).

I'd be interested to know what your source is.

treeleaf20
03-02-2011, 10:57 PM
That still doesn't work. I'm not sure why though. Same thing, if I change the code again to just say:


$("#one")


Instead of:


$('#"' + $myNum + '"')

it works fine.

VIPStephan
03-03-2011, 11:55 AM
That still doesn't work. I'm not sure why though. Same thing, if I change the code again to just say:


$("#one")


Instead of:


$('#"' + $myNum + '"')

it works fine.

What is that? The second one is still the same code that I criticized earlier. It should read $('#' + $myNum), not $('#"' + $myNum + '"').

treeleaf20
03-03-2011, 08:04 PM
Ok I fixed that part. Now it's doing something weird. When I add a couple divs it will only drop the image in the last one after two or more have been added. I'm not sure why this is. Here is a live link:

http://superphotoedit.com/testing/edit_photos.php

If you click the Add Another Div twice and then try and drop it in the middle one you'll see it goes to the third one instead. Any ideas on what is wrong? Thanks in advance.

VIPStephan
03-04-2011, 12:42 AM
Could it be the fact that an ID must not start with a number?

treeleaf20
03-04-2011, 12:45 AM
So I tried that. I made the $myNum look like this:


$myNum = "divid" + Math.floor((new Date().valueOf())/1000);


I alerted it and it does give me a unique divid each time so I'm not sure what is wrong with it yet.

venegal
03-04-2011, 01:53 AM
Btw, my post above was directed at you, treeleaf20.

treeleaf20
03-04-2011, 02:01 AM
Yes I know. I made that change and it allows me to drag into the newly created divs but if I create more then one new div dynamically it will be dropped into the last one even if I'm trying to drop it into a different dynamically created one.

venegal
03-04-2011, 02:24 AM
Actually, I didn't suggest a change, I only asked you a question.

treeleaf20
03-04-2011, 02:37 AM
I didn't get it from anywhere. I tried to modify it from help on here and just trying to escape the strings and I just have limited knowledge of jquery syntax



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum