CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
Clay H
Clay H

Reputation: 31

Draggable many elements with same class

I need to be able to drag all the .notes on the page, but when i use draggable() from the jQuery UI, it only works for the first .note. I have jQuery UI downloaded and is working. When I click the page it makes a new .note so I think that this is a cloning problem. Here is the code

HTML:

<body>
<div id="wrapper">
    <div id="wrp">
         <h1>Click to make a new note!!!</h1>

        <hr>
        <div class="note">
            <p class="remove"><b>X</b>

            </p>
            <div class="time"></div>
            <hr>
            <textarea class="item"></textarea>
            <div class="saved"><span class="msg"></span>

            </div>
        </div>
</body>

JS:

$(".note").closest('.note').draggable();

(I will not include all my JS)

Fiddle here: http://jsfiddle.net/cjhind/zfxj3cps/46/

Any advise?

Upvotes: 0

Views: 135

Answers (1)

Gerasimos Pap
Gerasimos Pap

Reputation: 459

Add this extra line in your onclick function because jquery cannot recognise new items. It is like it has already did target the items with .note and you need to retarget them. Take care because this will load again the script and it will act twice. so as many items you insert you can see by firebug that it is calling script more times. If you need more info let me know. 

$('#wrp, #wrapper').click(function showNote() {
    $('.note').fadeIn();
    $(".note").closest('.note').draggable(); // ADD THIS TO GIVE YOUR NOTE THE ABILTY TO BE DRAGABLE
});

Did this help?

Upvotes: 1

Related Questions