使用jQueryUI使用SVG元素拖放和调整大小

我把它用于

DIV

元素，因为这很容易。您可以在此处看到这一点：

我的目标是使用

SVG

元素执行相同的活动。事实证明，这更加困难

我当前的工作示例：

我已经开始使用这里找到的jQuerySVG插件：它帮助很大

以下是基本内容：

HTML

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

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");

$（“.droppable”）.droppable({
接受：“.draggable”，
drop：函数（e、ui）{
var pos=ui.position；
var$obj；
if（ui.helper[0].nodeName！=“DIV”）{
$obj=ui.helper.clone（“div”）.clone（）；
}否则{
$obj=ui.helper.clone（）；
}
变量c=$（“.drop”）.length；
如果（dropSnap）{
位置top=数学四舍五入（位置top/10）*10；
左位=数学四舍五入（左位/10）*10；
}
C++；
如果（$obj.是（“.square”））{
$obj.removeClass（“可拖动”）；
$obj.addClass（“已删除”）；
$obj.css({
位置：'绝对'，
顶部：位置顶部+“px”，
左：位置左+“px”
});
$obj.attr（“id”，“square-”+c）；
$obj.html（“+c+”）；
}
如果（$obj.is（“.hex”））{
$obj[0]。类列表。删除（“可拖动”）；
$obj[0]。类列表。添加（“删除”）；
$obj.attr（“id”，“十六进制-”+c）；
var hex=$obj.find（“svg”）.svg（）.svg（“get”）；
var text=hex.createText（）；
十六进制文本（14，24，文本字符串（c）{
类别：“标签”
});
}
$obj.on（“点击”，功能（e）{
log（“单击：”，e.target.nodeName）；
如果（$（“.selected”）.length）{
$（“.selected”）.removeClass（“selected”）；
}
var-self；
if（e.target.nodeName==“polygon”| | e.target.nodeName==“text”）{
self=$（e.target）.最近的（“div.hex”）；
}否则{
self=$（本）；
}
log（“Self:，Self[0]。节点名，Self[0]。innerText”）；
self[0]。classList.add（“选定”）；
自动拖动({
包含：'父'，
网格：[$（“.grid”）.data（“size”），$（.grid”）.data（“size”）]
});
自我调整大小({
手柄：“东北、西北、东南、西南”，
网格：$（“.grid”）.data（“大小”），
鬼：是的，
停止：功能（e、ui）{
log（“在ID:+$（this.data（“obj”）.ID上停止调整大小”）；
$（this）.data（“obj”）.width=ui.size.width；
$（this）.data（“obj”）.height=ui.size.height；
}
});
});
$obj.data（“obj”{
id:c，
标签：$obj.text（），
顶部：位置顶部，
左：位置左，
宽度：$obj.width（），
高度：$obj.height（），
图层：$obj.zIndex（）-1000，
颜色：$obj.css（“背景色”）
});
$obj.dblclick（函数（）{
变量title=$obj.text（）！==“”？$obj.text（）+“属性”：“对象属性”；
var label=$obj.text（）；
var color=$obj.css（“背景色”）；
变量层=$obj.zIndex（）-1000；
$（“项目对话框”）。对话框（“选项”、“标题”、“标题”）；
$（“更改项目标签”）.val（标签）；
$（“更改项目颜色”）.text（color）.css（“背景颜色”，color）；
$（“#更改#项#层”）.val（层）；
//$（“项目对话框”）。对话框（“移动到顶部”）；
$（“项目对话框”）。对话框（“打开”）；
});
$obj.appendTo（“.droppable”）；

---

任何建议都会非常有帮助。如果有更好的方法，比如我可以制作一个六边形的

div

，我很想知道。我可能已经埋头太深了，看不到这个问题。我还认识到可调整大小的将是一个harry beast，所以我真的只是在显示该项目已被选中并启用draggable.

显然有一个完整的网站致力于用CSS制作六边形div：（不确定这是否真的有用）尝试了更糟糕的问题。即我不能在六边形的所有边上创建边框，因为我使用边框来创建填充color@MaxStarkenburg我站对了！我有机会浏览了你推荐的网站，这确实有一个边界方法。谢谢，我会再看一遍！你可能让我走上了正确的道路。@MaxStarkenburg一步在一个更好的方向。正如你所看到的：一些关于调整大小的有趣结果！：）“有趣”的确，哈哈。也许看看这个提琴：（这是我在搜索“六边形css百分比”时得到的）。也许你可以合并他们按比例处理六边形单位的方法来调整大小。

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