使用JQuery UI拖放，调整SVG元素大小

Question

我对DIV元素有效，因为这很容易。你可以在这里看到这个：

https://jsfiddle.net/Twisty/18erqbqv/23/

我的目标是使用SVG元素执行相同的活动。事实证明这更加困难。

我目前的工作示例：

https://jsfiddle.net/Twisty/18erqbqv/37/

我已经开始使用这里找到的jQuery SVG插件：http://keith-wood.name/svg.html它有很大的帮助。

以下是基础知识：

HTML

<div id="parts">
  <div class="square draggable">
  </div>
  <div class="hex draggable">
  </div>
</div>
<div id="drawzone">
  <div class="droppable">
  </div>
</div>

CSS

#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;
}

的jQuery

  $("#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"
  });

此代码似乎都运行良好。这是一个棘手的辍学者。

  $(".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("<span class='label'>" + c + "</span>");
      }
      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");

任何建议都会非常有帮助。如果有更好的方法来做到这一点，我可以制作一个六角形div，我很想知道。我也可能把头深深地埋进去看问题。我也认识到可调整大小将是一个哈利野兽，所以我真的只是在努力表明该项目被选中并启用了可拖动。