简体   繁体   English

可拖动许多具有相同类的元素

[英]Draggable many elements with same class

I need to be able to drag all the .note s on the page, but when i use draggable() from the jQuery UI, it only works for the first .note . 我需要能够拖动页面上的所有.note ,但是当我从jQuery UI使用draggable() ,它仅适用于第一个.note I have jQuery UI downloaded and is working. 我已经下载了jQuery UI,并且正在运行。 When I click the page it makes a new .note so I think that this is a cloning problem. 当我单击页面时,它会创建一个新的.note因此我认为这是一个克隆问题。 Here is the code 这是代码

HTML: 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: JS:

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

(I will not include all my JS) (我不会包括我所有的JS)

Fiddle here: http://jsfiddle.net/cjhind/zfxj3cps/46/ 在这里提琴: http : //jsfiddle.net/cjhind/zfxj3cps/46/

Any advise? 有什么建议吗?

Add this extra line in your onclick function because jquery cannot recognise new items. 在您的onclick函数中添加此额外的行,因为jquery无法识别新项目。 It is like it has already did target the items with .note and you need to retarget them. 就像它已经使用.note定位项目一样,您需要重新定位它们。 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. 因此您插入的许多项目都可以通过Firebug看到它多次调用脚本。 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? 这有帮助吗?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM