SVG元素上的Jquery可排序

Question

我试图在SVG元素上实现JQuery的可排序。我是以D3的方式创建的，但这已经超出了D3的范围。这是最后的输出。不幸的是，有些事情不对劲，因为某些原因，酒吧没有分类。

请看这里的小提琴示例

我的最终目标是将其中一个条形图拖到<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>

我遵循这个链接中的示例：小小提琴-例子

谢谢

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>元素中。

这是管理drop操作的代码：

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