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

Posted 2023-05-08

【中文标题】Angularjs指令使HTML元素可拖动并且其中的HTML字段可选择或可修改

【英文标题】：Angularjs Directive to make HTML element draggable and HTML fields within it selectable or modifiable

【发布时间】：2020-11-10 12:01:36

【问题描述】：

我尝试了很多东西，但都没有奏效。因此，发布相同的内容。

这是背景：

我有这个html 元素，它将根据ng-repeat 动态创建一个矩形框。在每个Rectangular 框中都有各种HTML 元素，例如HTML select and input text 等，用户可以编辑这些字段。我想制作这个矩形框draggable，以便用户可以移动它。

因此，我写了一个 angularjs directive 来完成它并且它工作正常但是如果我添加指令，那么 select 字段和 rectangular 框中的所有字段都不再可编辑，因为它应用了 @ 987654331@ 到整个rectangular。如果我删除此指令，那么它会正常工作。如何使rectangular 框draggable 以及其中的字段为selectable or editable？

HTML CODE:

<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>

Angularjs Directive:

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

我试图改变一些东西，但它们都不起作用。当我尝试将draggable 添加到矩形框中时，其中的字段默认获得draggable directive，因此它们的default 行为被angularjs directive 覆盖。如果有人可以在这里为我提供一些指导，我将不胜感激。

【问题讨论】：

我尝试了更多的东西，但它们都不起作用。默认情况下，当我单击rectangular box 时，它会出现draggable，因此我无法选择其中的字段。有没有其他更好的方法可以让这件事发挥作用。 rectangular box 应为 draggable，其中的字段应为 editable.

你试过$event.stopPropagation();吗？这应该防止事件从输入冒泡到可拖动组件。如果可行，我会提供这个作为答案。

@DaneBrouwer 感谢您的回复。不，我没有试过这个。但我现在试过了。它似乎正在工作。非常感谢。请添加答案。我会接受的。另外，我有一个小疑问，请告诉我您是否可以帮助我。我需要某种机制来connect 这些矩形框。例如，使用Arrow 按钮。用户可以选择箭头按钮，他们可以根据需要连接rectangular box。知道我可以用什么来实现这一目标吗？

我强烈建议搜索 SO 并可能打开一个单独的问题。听起来您可能需要查看画布或 svg 箭头。

【参考方案1】：

您面临的问题称为Event-Bubbling。点击事件冒泡到触发拖动事件的容器矩形。

解决办法就是简单的实现$event.stopPropagation();，这样做是为了防止相关的$event冒泡并触发其他类似的事件。