Javascript Angularjs指令，使HTML元素可拖动，其中的HTML字段可选择或可修改

我尝试了很多东西，但都不管用。因此，发布相同的消息

背景如下：

我有一个

HTML

元素，它将基于

ng repeat

动态创建一个矩形框。在每个

矩形

框中都有各种HTML元素，如

HTML选择和输入文本

等，用户可以编辑这些字段。我想让这个矩形框

可以拖动

，这样用户就可以移动它了

因此，我编写了一个

angularjs指令

来执行此操作，它的工作正常，但是如果我添加该指令，那么

选择

字段和

矩形

框中的所有字段将不再可编辑，因为它将

可拖动指令

应用于整个

矩形

。如果我删除这个指令，那么它就可以正常工作。如何使

矩形

框

可拖动

，以及其中的字段

可选择或可编辑

HTML代码

：

<div ng-repeat="NewField in NewFieldValues">
    <div style="width:250px;height:120px;border:1px solid #000;" draggable draggable="true">
        <select ng-model="Dynamic.BusinessStep[NewField.ID]" ng-change="BusinessStepChange(NewField.ID,'BusinessStep')" class="form-control">
            <option class="dropdown-item" value="" selected> Choose Business Step</option>
            <option class="dropdown-item" ng-repeat="businessStep in businessSteps" value="{{ businessStep.value }}"> {{ businessStep.text }} </option>
        </select>
        <br/>
        <input type="text" ng-model="Dynamic.ObjectCount[NewField.ID]" ng-blur="BusinessStepChange(NewField.ID,'EventCount')" placeholder="number of objects" class="form-control"></input>
    </div>
    <br/>
</div>

我试图改变一些事情，但没有一件起作用。当我试图将

draggable

添加到矩形框中时，默认情况下，矩形框中的字段将获得

draggable指令

，因此它们的

默认

行为将被

angularjs指令

覆盖。如果有人能在这里给我一些指导，我将不胜感激。

您面临的问题叫做。单击事件将冒泡到触发拖动事件的容器矩形。

---

解决方案只是实现

$event.stopPropagation（）

，这样做是为了防止相关的

$event

冒泡并触发其他类似事件。

我尝试了一些其他方法，但没有一个有效。默认情况下，当我单击

矩形框

时，会出现

可拖动

，因此我无法选择其中的字段。有没有其他更好的方法，我可以使用，使这件事的工作。

矩形框

应可拖动，其中的字段应可编辑。您是否尝试过

$event.stopPropagation（）？这将防止事件从可拖动组件的输入冒泡。如果行得通，我会提供这个答案。@DaneBrouwer感谢您的回复。不，我没有试过这个。但我现在试过了。它似乎起作用了。谢谢。请加上答案。我会接受的。另外，我有一个小疑问，请告诉我您是否能帮助我。我需要某种机制来连接这些矩形框。例如，使用
箭头
按钮。用户可以选择箭头按钮，并根据需要连接
矩形框
。你知道我能用什么来达到这个目的吗？我强烈建议你通过搜索SO，并可能打开一个单独的问题。听起来您可能需要查看画布或svg箭头。
app.directive('draggable', function($document) {
    return function(scope, element, attr) {
        var startX = 0, startY = 0, x = 0, y = 0;
        
        element.css({
            position: 'relative',
            border: '1px solid red',
            backgroundColor: 'lightgrey',
            cursor: 'pointer',
            display: 'block'
        });
        
        element.on('mousedown', function(event) {
            console.log("MOUSE DOWN");
            // Prevent default dragging of selected content
            event.preventDefault();
            startX = event.screenX - x;
            startY = event.screenY - y;
            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
            return true;
        });

        function mousemove(event) {
            console.log("MOUSE MOVE");
            y = event.screenY - startY;
            x = event.screenX - startX;
            element.css({
              top   : y + 'px',
              left  : x + 'px'
            });
            return true;
        }

        function mouseup() {
            $document.off('mousemove', mousemove);
            $document.off('mouseup', mouseup);
            return true;
        }
    };
});