Question

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

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

我想要的行为是：

1）当我拖动输入框时： 1.1。它变成了半透明的颜色; 1.2。在将其拖入矩阵后，输入框所在的单元格将改变颜色;

2）拖动的输入框应从右侧菜单中消失;

我使用不同的技术做到这一点：蓝色矩阵是由几个矩形组成的SVG图片，以编程方式使用AngularJS / Javascript生成并从数据库中读取，输入框也以jQuery编程生成;

AFAIK，对于dragNdrop事件集成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时。

所以：

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

[OR]

检测当前拖动的html的丢弃，隐藏html，取消隐藏svg，对svg执行drop。

将HTML元素拖放到SVG结构中

1 个答案: