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

由于

Answer 1

我不确定您期望的完整行为，但下一个JSFiddle可以帮助您。

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

如果你想＆＃34;销毁＆＃34;启动拖动操作后的SVG，您可以手动执行。我的意思是如果相同的元素不能被拖动两次，当启动元素拖动动作时，应该销毁或隐藏原始SVG元素。在我的例子中，可以多次拖动同一个对象

SVG元素无法移动（拖动）出SVG标记，因此在启动拖动时，您需要创建一个HTML元素，用作＆＃34;真正拖动的对象＆＃34;，在我的代码中它是＆＃39; sa 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;
});

Jquery可在SVG元素上排序

1 个答案: