title: Using JQuery UI drag, drop, and resize with SVG elements
body: <p>I have this working for <code>DIV</code> elements, cause that is easy enough. You can see this working here:</p>
  
  <p><a href="https://jsfiddle.net/Twisty/18erqbqv/23/" rel="nofollow">https://jsfiddle.net/Twisty/18erqbqv/23/</a></p>
  
  <p>My goal is to perform the same activities with an <code>SVG</code> element. This is proving to be more difficult.</p>
  
  <p>My current working example: </p>
  
  <p><a href="https://jsfiddle.net/Twisty/18erqbqv/37/" rel="nofollow">https://jsfiddle.net/Twisty/18erqbqv/37/</a></p>
  
  <p>I have moved to using the jQuery SVG plugin found here: <a href="http://keith-wood.name/svg.html" rel="nofollow">http://keith-wood.name/svg.html</a> It has helped a great deal.</p>
  
  <p>Here are the basics:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="parts"&gt;
    &lt;div class="square draggable"&gt;
    &lt;/div&gt;
    &lt;div class="hex draggable"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="drawzone"&gt;
    &lt;div class="droppable"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#parts {
    border: 2px solid #000;
    padding: 7px;
    height: 44px;
    margin-bottom: 3px;
    width: 200px;
  }
  
  .draggable {
    display: inline-block;
  }
  
  .square {
    border: 1px solid #000;
    background-color: rgba(128, 255, 128, 0.65);
    text-align: center;
    height: 38px;
    width: 38px;
  }
  
  .hex {
    width: 40px;
    height: 40px;
  }
  
  .hex polygon {
    fill: rgba(255, 0, 0, 0.65);
    stroke: #000;
    stroke-width: 1;
  }
  
  .dropped {
    font-family: Arial, san-seriff;
    display: table;
  }
  
  .dropped .label {
    display: inline-block;
    text-align: center;
    margin-top: .5em;
  }
  
  .selected {
    border-color: #f30;
  }
  
  .selected polygon {
    stroke: #f30;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>  $("#parts div.hex").svg(40, 40);
    var hex = $(".hex").svg('get');
    hex.polygon([
      [19, 1],
      [38, 9],
      [38, 30],
      [19, 38],
      [1, 30],
      [1, 9]
    ], {
      fill: 'rgba(255, 0, 0, 0.65)',
      stroke: '#000',
      strokeWidth: 1
    });
    $(".draggable").draggable({
      helper: 'clone',
      cursor: "move",
      containment: ".droppable",
      zIndex: 1001,
      appendTo: ".droppable"
    });
  </code></pre>
  
  <p>This code all appears to work well. It's the droppable that gets tricky.</p>
  
  <pre><code>  $(".droppable").droppable({
      accept: ".draggable",
      drop: function(e, ui) {
        var pos = ui.position;
        var $obj;
        if (ui.helper[0].nodeName !== "DIV") {
          $obj = ui.helper.closest("div").clone();
        } else {
          $obj = ui.helper.clone();
        }
        var c = $(".dropped").length;
        if (dropSnap) {
          pos.top = Math.round(pos.top / 10) * 10;
          pos.left = Math.round(pos.left / 10) * 10;
        }
        c++;
        if ($obj.is(".square")) {
          $obj.removeClass("draggable");
          $obj.addClass("dropped");
          $obj.css({
            position: 'absolute',
            top: pos.top + "px",
            left: pos.left + "px"
          });
          $obj.attr("id", "square-" + c);
          $obj.html("&lt;span class='label'&gt;" + c + "&lt;/span&gt;");
        }
        if ($obj.is(".hex")) {
          $obj[0].classList.remove("draggable");
          $obj[0].classList.add("dropped");
          $obj.attr("id", "hex-" + c);
          var hex = $obj.find("svg").svg().svg('get');
          var texts = hex.createText();
          hex.text(14, 24, texts.string(c), {
            class: 'label'
          });
        }
        $obj.on("click", function(e) {
          console.log("Clicked: ", e.target.nodeName);
          if ($(".selected").length) {
            $(".selected").removeClass("selected");
          }
          var self;
          if (e.target.nodeName === "polygon" || e.target.nodeName === "text") {
            self = $(e.target).closest("div.hex");
          } else {
            self = $(this);
          }
          console.log("Self: ", self[0].nodeName, self[0].innerText);
          self[0].classList.add("selected");
          self.draggable({
            containment: 'parent',
            grid: [$(".grid").data("size"), $(".grid").data("size")]
          });
          self.resizable({
            handles: "ne, nw, se, sw",
            grid: $(".grid").data("size"),
            ghost: true,
            stop: function(e, ui) {
              console.log("Resize Stopped on ID: " + $(this).data("obj").id);
              $(this).data("obj").width = ui.size.width;
              $(this).data("obj").height = ui.size.height;
            }
          });
        });
        $obj.data("obj", {
          id: c,
          label: $obj.text(),
          top: pos.top,
          left: pos.left,
          width: $obj.width(),
          height: $obj.height(),
          layer: $obj.zIndex() - 1000,
          color: $obj.css("background-color")
        });
        $obj.dblclick(function() {
          var title = $obj.text() !== "" ? $obj.text() + " Properties" : "Object Properties";
          var label = $obj.text();
          var color = $obj.css("background-color");
          var layer = $obj.zIndex() - 1000;
          $("#item_dialog").dialog("option", "title", title);
          $("#change_item_label").val(label);
          $("#change_item_color").text(color).css("background-color", color);
          $("#change_item_layer").val(layer);
          //$("#item_dialog").dialog("moveToTop");
          $("#item_dialog").dialog("open");
        });
        $obj.appendTo(".droppable");
  </code></pre>
  
  <p>Any advice would be super helpful. If there is a better way to do this, such that I can make a hexagon shaped <code>div</code>, I would love to know. I may have also buried my head too deep in to see the issue. I also recognize the resizable will be a harry beast, so I am really just working on showing that the item is selected and enabling draggable.</p>