Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts

    Create a new droppable area

    All,
    I currently have this code:
    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.
    Last edited by treeleaf20; 03-02-2011 at 07:14 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,724
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    Thanks, I tried to do this:
    Code:
    $('<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:
    Code:
    $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.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,724
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Could it be the double quotes?
    Code:
    $('#"' + $myNum + '"')…
    As that would translate to #"one" in Realspeak.

  • #5
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by VIPStephan View Post
    Could it be the double quotes?
    Code:
    $('#"' + $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.

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    That still doesn't work. I'm not sure why though. Same thing, if I change the code again to just say:
    Code:
    $("#one")
    Instead of:
    Code:
    $('#"' + $myNum + '"')
    it works fine.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,724
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Quote Originally Posted by treeleaf20 View Post
    That still doesn't work. I'm not sure why though. Same thing, if I change the code again to just say:
    Code:
    $("#one")
    Instead of:
    Code:
    $('#"' + $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 + '"').

  • #8
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    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.

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,724
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Could it be the fact that an ID must not start with a number?

  • #10
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    So I tried that. I made the $myNum look like this:
    Code:
    $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.

  • #11
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Btw, my post above was directed at you, treeleaf20.

  • #12
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    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.

  • #13
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Actually, I didn't suggest a change, I only asked you a question.

  • #14
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •