10

I have some DOM element which is draggable using jQuery UI.All are working fine but when i create some element using jQuery , then they are not draggable at all. i.e

$('div.draggable').draggable(); //Existing element , it works :)
$('p.draggable').draggable() ; //Newly created paragraph with same class name, it doesnt work at all :(

Thanks in advance !!!

I am trying This :

<script type="text/javascript">
     $(document).ready(function(){
         $('body').append('<p class="draggable">Newly Created Paragraph</p>');
         $('p.draggable').draggable(); **//This is not working**
     });
</script>

However Somehow this is working

    <script type="text/javascript">
     $(document).ready(function(){
         $('body').append('<p class="draggable">Newly Created Paragraph</p>')
                 .find('p.draggable').draggable(); **This is working**

     });
</script>
1
  • try to put alert before and after $('p.draggable').draggable(); then see which one is happening first. Also won't it be $('body')? Mar 22, 2012 at 5:00

8 Answers 8

10

I know its been a while, but this problem recently bugged me too. As someone else mentioned, you got to rerun .draggable() on the newly created item, but that doesn't work if you defined certain options in your .draggable(). Also what didn't work was putting the $().draggable() in a function and then calling the function after creating a new element (this trick does however work with resetting droppables - go figure).

Anyway, long story short -> Putting the $().draggable() setup in a function and then calling the function after creating new element DID WORK, but i had to TAKE IT OUT of the document ready function..... after i disabled that, it worked.

You can call that function as many times and it keeps on working after every created element. It seems if it's in the document.ready statement then its a 1 shot deal..

Hope that helps.

0
6

You need to call draggable() after the newly created element is inserted into the DOM.

The reason being, is that the first line of code is only matching existing elements. Newly created elements aren't selected in that first line.

2
  • Thanks for your effort, but i have tried that as well, i kept it inside $(document).ready() as well as also tried to write the <script></script> at the end of document ie. just before </body> tag as well, but it doesnt work :(
    – Vivek
    Mar 21, 2012 at 6:55
  • I don't think you're doing it correctly. How is a newly created paragraph inserted in the HTML/DOM? After it is created, .draggable() needs to be called on that element. Mar 21, 2012 at 16:48
1

Actually it seems that there is problem with draggable. When you append some htmlTag and then try to find it and make it draggable, it do not recognise it. try to make a new element using createElement and then append it. Hope it works

var newEle = document.createElement('p');
$(newEle).attr("class","draggable").draggable();
$('body').append($(newEle));

or

var newEle = document.createElement('p');
$(newEle).attr("class","draggable");
$('body').append($(newEle));
$('p.draggable').draggable();
2
  • Thanks for ur tym and effort , but still a try with no luck yet :(
    – Vivek
    Mar 22, 2012 at 11:55
  • I think $('p.draggable') selects all the 'p' elements with class 'draggable' and draggable() once applied to an element does not apply again, rather the previously applied draggable also gets corrupted. Try .draggable().draggable() on any element and then you can see. However, if you apply draggable before appending itself and then append, it will apply draggable() to only that element and that too once. Mar 22, 2012 at 12:25
1

i had this problem but after reading this i could solve it. so you have to call again draggable() method after building your new element, this is my code:

$(".in-browser").each(function(){
        $(this).dblclick(function(){
            var browseIn = $(this).data("href");
            var browserHTML = '<div class="browser draggable">\
        <ul class="browser-buttons">\
            <li>_   \
            <li>#   \
            <li>x   \
        </ul>\
        <div class="browser-win-container">\
        <div class="addressbar"></div>\
        <iframe class="opening-window" src="'+browseIn+'"></iframe>\
    </div>\
    </div>';
            $("body").append(browserHTML);
            $(".draggable").draggable(); //look at here
        });
    });
1

You should call draggable() function everytime you call an event action:

$('body').on('click', '.add-new-table', function () {
 $( ".canvas" ).prepend('<div class="ui-widget-content draggable"><p>Drag me</p></div>');
 $(function(){
   $(".draggable" ).draggable({
     containment: "parent"  
   });
 });
});
0

You have to apply draggable on the instance of the newly created object, Rewritten code:

<script type="text/javascript">
 $(document).ready(function(){
    var newElement = '<p class="draggable">Newly Created Paragraph</p>';
    $('body').append(newElement);
    newElement.draggable(); **//This is working**
 });

It should work now.

0

You can use setTimeout to call draggable function after the new element has made.

$('div').click(function(){
 $('body').append('<div class="box"></div>');
 setTimeout(function() {
  $('div.box').draggable({
   drag: function( event, ui ) {},
   cursor:'-webkit-grabbing'
  });
 },1000);
})
1
  • Why use setTimeout for this? The other solutions, which are much older, work without it
    – Nico Haase
    Aug 28, 2018 at 15:15
0
$(document).on("mouseenter", ".item", () => {
     $('.item').draggable(); }); 

Its work because drag event trigger mouseenter

1
  • Hi and welcome to Stack Overflow! Please take the tour. Thanks for answering but can you also add an explanation on how your code solves the issue? Check the help center for info on how to format code.
    – Tyler2P
    Jan 7, 2021 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.