javascript - 将 HTML 元素放入 SVG 结构中

Question

我有下面的图片描述了应用程序的一部分:

我希望能够将禁用的输入框拖到矩阵中。

我想要的行为是:

1)当我拖动输入框时: 1.1.它变成半透明的颜色； 1.2.拖入矩阵后，输入框所在的单元格会变色；

2)拖动的输入框应该从右侧菜单中消失；

我使用不同的技术来完成此操作:蓝色矩阵是由多个矩形组成的 SVG 图片，使用 AngularJS/Javascript 以编程方式生成并从数据库读取，输入框也是使用 jQuery 以编程方式生成；

据我所知，为拖放事件集成 SVG 和 HTML 有点复杂，因此我们将不胜感激。这是代码:

JQuery代码并生成右侧输入框:

 $scope.PopulateQuestionsExpert=function() {
       var N=$scope.perguntas.length;
        alert("Num of questions is "+ N);
        var targetDiv = $("#questionsExpert");
        targetDiv.html("");
        for (var i = 0; i < N; i++) {
            var auxi = "q"+i;
            //  targetDiv.append($("<input />"));
            targetDiv.append(" <div class=\"input-group input-group-option col-xs-12\">\
            <input id="+ auxi+"  type=\"text\" name=\"option[]\" class=\"form-control\" placeholder=\"Add option...\" disabled>\
                <span class=\"input-group-addon input-group-addon-remove\">\
                <span class=\"glyphicon glyphicon-remove\"></span>\
                </div>");

            document.getElementById(auxi+"").value=$scope.perguntas[i];
            //document.getElementById(auxi+"").setAttribute('draggable', 'true');
        }
        // alert("Finished populate");
        //$("#showq").click(); //HACK
       // angular.element('#showq').trigger('click').trigger('click');
        //VER COMANDOS DE JQUERY QUE USAM MANIPULAÇÃO E COLOCAÇÃO DE ELEMENTOS: INSERT() E INSERTAFTER()

    };

该矩阵由包含类似于以下内容的 JSON 元素的数组组成:

{"rect":{"x":220,  "y":220,  "width" : 300, "height" : 100}, "info":""}

有什么方法可以让输入框(简单的 HTML)拖放到(SVG)矩阵上吗？

Answer 1

您不能直接将 HTML 添加到 SVG 中，嗯，大多数情况下不能。有一个foreignObject的概念.

我猜你最好的选择是进行交换。当您开始拖动 HTML 时，或者当您要放下 HTML 时。

所以要么:

1. 检测 html 上的拖动，隐藏 html，取消隐藏匹配的 svg，开始在 svg 上拖动。

[或]

检测当前拖动的 html 上的放置、隐藏 html、取消隐藏 svg、在 svg 上执行放置。