Draggable Helper function Test

http://stackoverflow.com/questions/35790360/show-custom-image-when-drag-an-element-in-jquery

by Twisty

HTML

<ul class="tree">
  <li class="top">Liabilities
    <ul>
      <li class="sub"><a href="https://www.eliteediting.com/images/get-free-instant-quote-small-button-hover.png">Test 0</a></li>
      <li class="sub"><a href="https://www.eliteediting.com/images/get-free-instant-quote-small-button-hover.png">Test 1</a></li>
      <li class="sub"><a href="https://www.eliteediting.com/images/get-free-instant-quote-small-button-hover.png">Test 2</a></li>
      <li class="sub"><a href="https://www.eliteediting.com/images/get-free-instant-quote-small-button-hover.png">Test 3</a></li>
    </ul>
  </li>
</ul>

CSS

.tree a {
  text-decoration: none;
  color: #000;
}

.tree li {
  list-style-type: square;
}

JavaScript

$(function() {
  $(".sub a").draggable({
    revert: "invalid",
    containment: "document",
    helper: function(e, ui) {
      var $img = $(this).attr("href");
      var $d = $("<div>");
      $d.css({
        "width": "250px",
        "height": "48px",
        "background-image": "url(" + $img + ")",
        "background-repeat": "no-repeat",
        "padding": "12px 0"
      });
      var $text = $("<span>" + $(this).text() + "</span>");
      $text.css({
        "display": "block",
        "text-align": "center",
        "width": "100%"
      });
      $d.append($text);
      return $d;
    },
    cursor: "move",
    start: function(event, ui) {
      var draggedId = event.target.id;
    }
  }).click(function(e) {
    e.preventDefault();
  });
});