3

jQuery UIからドラッグ可能でサイズ変更可能な機能を備えたクローン要素（.clone（true）を使用）でこの奇妙な問題が発生しています。複製後、複製された要素にはこれらの機能がなく、機能しません。

クローン作成後に機能を割り当てても問題が解決しないなど、さまざまな解決策を探していました。

これがコードです

jQuery(document).ready(function(){
            jQuery('#res').draggable({
                containment: 'body',
                grid: [ 10, 10 ],
                snap: true,
            });
            jQuery('#res').resizable({
                grid : 10,
                handles : 's'
            });
            var res_clone = jQuery('#res').clone(true);
            jQuery(res_clone).attr('id', 'res_clone');
            jQuery('#res').parent().append(res_clone);
        });
4

2 に答える 2

9

私は自分の問題の解決策を見つけました。サイズ変更可能な要素で.clone（true）を使用すると、イベントハンドラーが機能していないように見えるため、代わりに単純な.clone（）を実行します。現在、複製された要素には、.draggable（）メソッドによって新しく追加されたハンドラーに干渉する.ui-resizable-handler divが含まれているため、問題が解決しないため、.draggable（）メソッドを適用する前にすべての.raiを削除しました。複製された要素で見つかったui-resizable-handlerdiv。

ドラッグ可能な機能は問題なく機能します。

実例

jQuery(document).ready(function(){
            jQuery('#res').draggable({
                containment: 'body',
                grid: [ 10, 10 ],
                snap: true,
            });
            jQuery('#res').resizable({
                grid : 10,
                handles : 's'
            });

            var res_clone = jQuery('#res').clone();
            jQuery(res_clone).attr('id', 'res_clone');
            jQuery(res_clone).find('.ui-resizable-handle').remove();
            jQuery(res_clone).draggable({
                containment: 'body',
                grid: [ 10, 10 ],
                snap: true,
            });
            jQuery(res_clone).resizable({
                grid : 10,
                handles : 's'
            });

            jQuery('#res').parent().append(res_clone);
        });
于 2010-09-30T11:21:35.063 に答える
0

JQuery.clone()DOMでのみ機能します。したがって、親に追加した後でのみ、サイズ変更またはドラッグ可能にすることができます。

ドキュメントを参照してください：http： //api.jquery.com/clone/

JavaScriptオブジェクトの場合は、extend（）を使用します

http://api.jquery.com/jQuery.extend/

于 2010-09-30T10:26:07.497 に答える