Jquery在SVG元素上排序

我正試圖在SVG元素上實現JQuery的Sortable。我通過D3創建了這個，但是現在D3不在D3的範圍之內。這是爲了最終輸出。不幸的是，有些東西是不對的，因爲某些原因，酒吧沒有排序。Jquery在SVG元素上排序

請看這裏這個jsfiddle例如

我的最終目標是拖動條的一成<ul>，並把它變成一個<li>元素

我有以下的javascript：

$('#varchart').sortable(); 
$('#varchart').disableSelection();

它適用於以下HTML：

<svg class="chart foox" id="varchart" width="373" height="90"> 
    <g class="ui-state-default"> 
     <rect class="dragrect" height="20" y="60" x="5" width="9.098591549295774" style="fill: #3261ab; opacity: 0.9; shape-rendering: crispedges; fill-opacity: 0.4;"></rect> 
    </g> 
    <g class="ui-state-default"> 
     <rect class="dragrect" height="20" y="20" x="5" width="323" style="fill: #3261ab; opacity: 0.9; shape-rendering: crispedges; fill-opacity: 0.4;"></rect> 
    </g> 
</svg>

我下面的例子在這個環節：jsfiddle - example

感謝

來源

2014-03-29 Paul

都不行！ SVG將被瀏覽器直接渲染。您無法處理SVG Elements上的特定用戶輸入。 –

我不知道你期待完整的行爲，但接下來的jsfiddle可以幫助你。

http://jsfiddle.net/pFyX8/5/

如果要「消滅」了SVG拖動動作開始後，你可以做手工。我的意思是，如果同一個元素不能被拖動兩次，當元素拖動動作開始時，原始的SVG元素應該被銷燬或隱藏。在我的例子中，同一個對象可以被拖動多次

SVG元素不能移動（拖出）SVG標記，所以當啓動拖動時，需要創建一個HTML元素作爲「真正拖動的對象」，在我的代碼這是一個div。

這是啓動拖動動作的代碼：

$('.dragrect') 
    .bind('mousedown', function(event, ui){ 
     event.preventDefault(); 
     window.myDraggedElement = $('<div/>').prop('id', 'mydrag').css({ 
      position: 'absolute', 
      cursor: 'pointer', 
      width: $(event.target).attr('width'), 
      height: 20, 
      left: event.pageX - 2, 
      top: event.pageY -2 , 
      backgroundColor: '#aaf', 
      'z-index': 1000 
     }).draggable(); 
     console.log(myDraggedElement); 
     $('body').append(myDraggedElement); 
     myDraggedElement.trigger(event); 
    });

當對象被放下後，拖動的元素被插入在<li>元件。

這是管理的下降動作的代碼：

$('.square').droppable({ accept: "#mydrag" }); 

$('.square').on('drop', function(ev) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    var newItem = $('<li/>').append(myDraggedElement); 
    myDraggedElement.css({'position': 'static'}); 
    myDraggedElement.draggable('destroy') 
    $('.accept').append(newItem); 
    myDraggedElement = null; 
});

來源

2014-03-30 19:08:12 Roberto

Jquery在SVG元素上排序

回答

相關問題