Jquery克隆（'true'）防止拖動

-2

我一直在試圖克隆一個SVG圖像，然後讓雙擊事件並使其可拖動。出於某種原因（我希望你能告訴我）我的代碼無法正常工作。它只能雙擊，或者如果我從clone（）方法中刪除'true'，它只能拖動，但我不能同時做到這一點。下面是代碼：Jquery克隆（'true'）防止拖動

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html> 
    <head> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    var c = 0; 
    $('svg[id^=draggable_bull_]').draggable({ 
     start: function(event, ui) { 
     $(this).draggable('option','revert',false)  
     } 
    }); 
    $('svg[id^=draggable_bull_').on('dblclick',function(){ 
    alert(); 
    });   
    $("button").on('click',function(){ 
    $('#draggable_bull_0').clone(true).attr('id', 'draggable_bull_'+(++c) ).appendTo("body").draggable();  
    });   
    }); 
    </script> 
    </head> 
    <body> 
    <button id="click">CLICK TO CLONE</button>  

    <svg 
    width="16px" 
    height="16px" 
    id="draggable_bull_0"> 
    <defs id="defs2987" /> 
    <sodipodi:namedview 
    id="base" 
    pagecolor="#ffffff" 
    bordercolor="#666666" 
    borderopacity="1.0" 
    inkscape:pageopacity="0.0" 
    inkscape:pageshadow="2" 
    inkscape:zoom="22.197802" 
    inkscape:cx="8" 
    inkscape:cy="8" 
    inkscape:current-layer="layer1" 
    showgrid="true" 
    inkscape:grid-bbox="true" 
    inkscape:document-units="px" 
    inkscape:window-width="792" 
    inkscape:window-height="691" 
    inkscape:window-x="150" 
    inkscape:window-y="150" 
    inkscape:window-maximized="0" /> 
    <g 
    id="layer1" 
    inkscape:label="Layer 1" 
    inkscape:groupmode="layer"> 
    <path 
    sodipodi:type="arc" 
    style="fill:#ececec;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-  linecap:butt;stroke-linejoin:miter;stroke-opacity:1" 
    id="path2993" 
    sodipodi:cx="8.0188122" 
    sodipodi:cy="7.891089" 
    sodipodi:rx="5.9915843" 
    sodipodi:ry="5.7212873" 
    d="m 14.010396,7.891089 a 5.9915843,5.7212873 0 1 1 -11.9831681,0 5.9915843,5.7212873 0 1 1 11.9831681,0 z" /> 
    </g> 
    </svg> </body> 
     </html>

來源

2014-06-08 user1235223

好吧，我想通了。這是我做過什麼：我改變了這行（我刪除了真正的克隆（））

$('#draggable_bull_0').clone().attr('id', 'draggable_bull_'+(++c) ).appendTo("body").draggable();

現在我留下的問題是雙擊事件不點火。所以我這樣做：

$('#draggable_bull_'+c).on("dblclick", function() { 
      alert($(this).attr('id')); 
     });

它看起來像這樣：

$("button").on('click',function(){ 
     $('#draggable_bull_0').clone().attr('id', 'draggable_bull_'+(++c) ).appendTo("body").draggable(); 

     $('#draggable_bull_'+c).on("dblclick", function() { 
      alert($(this).attr('id')); 
     }); 
    });

我希望這可以幫助別人。

來源

2014-06-09 16:18:55 user1235223

Jquery克隆（'true'）防止拖動

回答

相關問題