Question

我一直在尝试克隆SVG图像，然后获取双击事件并使其可拖动。出于某种原因（我希望你能告诉我）我的代码无效。它只能双击，或者如果我删除了真正的＆＃39;从clone（）方法来看它只是可拖动但我不能同时做到。这是代码：

    <!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>

`

Answer 1

好的我明白了。这就是我做的：我更改了这一行（我从clone（）中删除了true）

 $('#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') );
        }); 
     });

我希望这有助于某人。

Jquery clone（'true'）阻止draggable

1 个答案: