可在SVG元素上排序的Jquery

Question

我正在尝试在SVG元素上实现JQuery的Sortable。 我是通过D3来创建的，但这现在不在D3的范围内。 这是最终的输出。 不幸的是，由于某些原因，酒吧没有排序，所以有些不对劲。

请在这里查看这个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-示例

谢谢

Answer 1

我不确定您期望的完整行为，但是下一个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;
});