首頁(yè) 猿問(wèn) 有什么辦法可以實(shí)現(xiàn)對(duì)方塊B的拖拽？

有什么辦法可以實(shí)現(xiàn)對(duì)方塊B的拖拽？

JQuery

胡說(shuō)叔叔 2023-05-01 19:15:49

代碼如下<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <style> .draggable { width: 200px; height: 200px; border: 1px dotted #000 } </style> <script> $(function() { $( ".draggable" ).draggable(); $("#add_elem").click(function(){ $elem = '<div class="draggable">方框B</div>'; $('body').append($elem); }); }); </script></head><body><button id="add_elem">添加元素</button><div class="draggable"> <p>方框A</p></div></body></html>效果圖如下：如圖中：方塊A可以拖拽，這個(gè)可以理解，但是當(dāng)點(diǎn)擊添加元素按鈕生成方塊B后，方塊B不可以拖拽，這是為什么？

查看完整描述

2 回答

月關(guān)寶盒

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊

= =必然不能。。 .draggable()是主動(dòng)調(diào)用才會(huì)在elem上添加額外的class才能達(dá)到拖拽效果。

 $(function() {
        
            $( ".draggable" ).draggable();
            $("#add_elem").click(function(){
                  elem = $('<div/>').addClass('draggable').text('方框');
                  elem.draggable();
                  $('body').append(elem);

            });
        });

反對(duì) 回復(fù) 2023-05-03