jQury UI Sortable

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<div class="demo">
    <ul id="sortable">
        <li class="ui-state-default">
            <svg>
               <use xlink:href="#icon-add" />
           </svg>
            Item 1
        </li>
        <li class="ui-state-default">
            <svg>
               <use xlink:href="#icon-add" />
           </svg>
            Item 2
        </li>
        <li class="ui-state-default">
            <svg>
               <use xlink:href="#icon-add" />
           </svg>
            Item 3
        </li>
        <li class="ui-state-default">
            <svg>
               <use xlink:href="#icon-add" />
           </svg>
            Item 4
        </li>
    </ul>
    
</div><!-- End demo -->

<!--Icons-->
<div class="svg-icons">
    <svg xmlns="http://www.w3.org/2000/svg" class="svg-icons" style="display: none;">
  
      <!--Newer Icon's - Keep Alphabetized -->
  
      <symbol id="icon-add" viewBox="0 0 18 18">
        <path d="M 16 8 h -6 v -6 c 0 -0.552 -0.448 -1 -1 -1 s -1 0.448 -1 1 v 6 h -6 c -0.552 0 -1 0.448 -1 1 s 0.448 1 1 1 h 6 v 6 c 0 0.552 0.448 1 1 1 s 1 -0.448 1 -1 v -6 h 6 c 0.552 0 1 -0.448 1 -1 s -0.448 -1 -1 -1" />
      </symbol>
    </svg>
</div>

CSS

svg{height:20px;width:20px;}

JavaScript

$("#sortable").sortable({
        stop: function(event, data) {
          useElement = data.item[0].getElementsByTagName("use")[0];
          if (useElement.href && useElement.href.baseVal) {
            useElement.href.baseVal = useElement.href.baseVal; // trigger fixing of href
          }
        }
    });