SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery UI make inline added elements draggable

    Hello,

    I have something like this
    Code:
    $(".myDiv").draggable({DIFFERENT_OPTIONS_HERE});
    Now, at some points in my application, I am adding more divs
    Code:
    $("#container").prepend('<div class='.myDiv'></div>
    But these new divs are not becoming draggable; I would like to have a way to make them draggable, without having to initiate .draggable() again after they are added to the container.

    Thank you

  2. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,055
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Your issue seems to be with the following
    Code:
    $("#container").prepend('<div class='.myDiv'></div>
    First the code is include, second, the syntax throws an error, and lastly, if it were correct, the fact that you have .myDiv is incorrect for the class name.

    It should be
    Code:
    $("#container").prepend('<div class="myDiv"></div>');

  3. #3
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cpradio View Post
    Your issue seems to be with the following
    Code:
    $("#container").prepend('<div class='.myDiv'></div>
    First the code is include, second, the syntax throws an error, and lastly, if it were correct, the fact that you have .myDiv is incorrect for the class name.

    It should be
    Code:
    $("#container").prepend('<div class="myDiv"></div>');

    Sorry these are typos when typing codes here, in my actual code I of course closed the prepend(); and didn't use class='.myClass'.

  4. #4
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,055
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    I think you will need to use .delegate()
    Code:
    $('.myDiv').delegate('mouseover', function() { $(this).draggable({DIFFERENT_OPTIONS_HERE}); });
    Stackflow has a few good implementation too at http://stackoverflow.com/questions/1...ng-live-events

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cpradio View Post
    I think you will need to use .delegate()
    As of jQuery 1.7, delegate has been superceeded by the on method.
    See the Direct and Delegated events section there for details.

    Code javascript:
    $('.myDiv').on('mouseover', function() {
        $(this).draggable({DIFFERENT_OPTIONS_HERE});
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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