Jquery Sortable on an SVG Element

Question

I'm trying to implement JQuery's Sortable on an SVG element. I created this by way of D3, but this is now outside of the realm of D3. This is for the final output. Unfortunately something is amiss, for some reason the bars do not sort.

Please look at this jsfiddle example here

My eventual goal is to drag one of the bars into the <ul> and turn it into an <li> element

I have the following javascript:

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

Which operates on the following 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>

I was following the example in this link: jsfiddle - example

Thanks

Answer 1

I'm not sure about the complete behavior you are expecting, but next JSFiddle could help you.

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

If you want to "destroy" the SVG after drag action is initiated you can to do it manually. I mean if the same element can not be dragged twice, when the element drag action is initiated the original SVG element should be destroyed or hidden. In my example, the same object can be dragged many times

The SVG element cannot moved (dragged) out of SVG tag, so when drag is initiated you need to create a HTML element that is used as "real dragged object", in my code It's a div.

This is the code that initiate the drag action:

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

When the object is dropped, the dragged element is inserted in the <li> element.

This is the code that manage the drop action:

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