7

I am using dragabble method from jquery ui. How to apply live() on draggable.

$("#image").draggable({ containment: [10, 150, 0, 0], scroll: false});

What I tried is this 

$("#image").live("draggable", function () {
.draggable({ containment: [10, 150, 0, 0], scroll: false});

But this is not working.

Thanks

user2261231
  • 109
  • 2
  • 13
  • 2
    You mean [`.on()`](http://api.jquery.com/on). [`.live()` has been removed as of jQuery 1.9](http://api.jquery.com/live/) – Blazemonger Apr 09 '13 at 17:54
  • 2
    See this sample discussion http://stackoverflow.com/a/3349395/1193035 –  Apr 09 '13 at 17:54
  • 2
    FYI, .live() is deprecated. Check out .on() instead (http://api.jquery.com/on/) – isotrope Apr 09 '13 at 17:55
  • 3
    If you are trying to apply a plugin to dynamic elements, it won't work. there must be an event involved. – Kevin B Apr 09 '13 at 17:55
  • 1
    If you are adding the elements yourself, you should convert them to draggable as soon as they're added. – Blazemonger Apr 09 '13 at 17:58
  • @Blazemonger: .live() is working but when I move the image, image vanishes. This is a example http://jsfiddle.net/roXon/hMmbK/2/. I am using .live because in actual code image gets inserted dynamically. This is, how I am using $('#imgage').live('mouseover',function(){ – user2261231 Apr 09 '13 at 18:04
  • I don't see any `live()`-like functionality in your fiddle. – Blazemonger Apr 09 '13 at 18:08
  • @Blazemonger:Can you see my comment, I have detailed explained I am using that in my code above jsfiddle is an example. can you tell me, how to convert an element into dragable. – user2261231 Apr 09 '13 at 18:10
  • Here is your fiddle now working. Do you see how you were setting the css width/height constraints on the div, not the img and how that was affecting your code? http://jsfiddle.net/vUzmG/ – Moby's Stunt Double Apr 09 '13 at 18:13
  • @Moby'sStuntDouble:Please read my above comment. – user2261231 Apr 09 '13 at 18:15
  • Aside from sitting at your desk and writing your code for you, I am not sure how much more I can help you. I corrected your fiddle for you and gave you an answer below, you should be able to work it out from here. – Moby's Stunt Double Apr 09 '13 at 18:17

1 Answers1

14

Firstly as an FYI, live is deprecated, you should be using .on() as the comments above state.

Secondly, you won't be able to do what you need to do with either scenario as those events aren't baked into on(). Therefore the way that I would approach it is to perform your event attachment inside a function:

function doDraggable() {
    $(".draggable").draggable({ containment: [0, finalHeight, 0, 0], scroll: false});
}

Then initialise it when the document is ready and also whenever ajax completes:

$(document).ready(function () {
    doDraggable();
});
$(document).ajaxComplete(function () {
    doDraggable();
});

You can be more specific than the document selector using the ajaxComplete event so that it doesn't fire for every ajax event, but you get my drift...

Moby's Stunt Double
  • 2,540
  • 1
  • 16
  • 32
  • What if he's adding elements without AJAX? – Blazemonger Apr 09 '13 at 17:59
  • Then the document.ready should cover it. Or do you mean performing ajax outside of jQuery? If so, he will need to attach callbacks to those specific ajax calls to reinitialise the attachments. – Moby's Stunt Double Apr 09 '13 at 18:01
  • 1
    I mean adding elements to the DOM in response to a user event, such as clicking a button, simply through `$('body').append('div')` or something like that. – Blazemonger Apr 09 '13 at 18:02
  • I see. Simply calling the function after updating the DOM would do it, right? – Moby's Stunt Double Apr 09 '13 at 18:04
  • @Blazemonger:Can you see my comment. How do I convert them to dragable ? – user2261231 Apr 09 '13 at 18:07
  • By recalling .draggable on the necessary elements you have added, after they hit the DOM. Live() will work, but as we're all saying, it's deprecated. Use .on() or your code will one day simply stop working when you update jQuery. – Moby's Stunt Double Apr 09 '13 at 18:10
  • @Moby'sStuntDouble:Thanks for taking time to answer my question but your answer is not working. – user2261231 Apr 09 '13 at 18:20
  • Okay, one last try... once you have added the elements to the DOM, run this line of code again: $("#image").draggable({ containment: [0, finalHeight, 0, 0], scroll: false}); – Moby's Stunt Double Apr 09 '13 at 18:24
  • @Moby'sStuntDouble:You are confusing me. – user2261231 Apr 09 '13 at 18:28
  • 1
    If this is confusing, I would suggest that you go back to basics with jQuery as the concepts presented here are relatively simple. There are thousands of tutorials on the web. You may wish to start here: http://docs.jquery.com/Tutorials focus on event attachments and DOM manipulation. This is also useful: http://www.jquery4u.com/jquery-functions/on-vs-live-review/ – Moby's Stunt Double Apr 09 '13 at 18:34