[英]Angularjs Directive to make HTML element draggable and HTML fields within it selectable or modifiable
I tried many things but none of them are working.我尝试了很多东西,但没有一个有效。 Hence, posting the same.因此,发布相同的内容。
Here is the background:这是背景:
I have this HTML
element which will create a rectangular box based on ng-repeat
dynamically.我有这个HTML
元素,它将基于ng-repeat
动态创建一个矩形框。 Within each of this Rectangular
box there are various HTML elements such as HTML select and input text
etc and these fields can be edited by the user.在每个Rectangular
框中都有各种 HTML 元素,例如HTML select and input text
等,这些字段可以由用户编辑。 I want to make this rectangular box draggable
so the user can move it around.我想让这个矩形框draggable
,以便用户可以移动它。
Hence, I have written an angularjs directive
to do it and its working fine But if I add the directive then the select
field and all the fields within the rectangular
box are no more editable as it applies the draggable directive
to the whole rectangular
.因此,我编写了一个angularjs directive
来完成它并且它工作正常但是如果我添加指令,那么select
字段和rectangular
框内的所有字段都不再可编辑,因为它将draggable directive
应用于整个rectangular
。 If I remove this directive then it would work fine.如果我删除此指令,那么它会正常工作。 How can I make the rectangular
box draggable
, as well as fields within it, are selectable or editable
?如何使rectangular
框draggable
,以及其中的字段selectable or editable
?
HTML CODE
: 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;
}
};
});
I tried to change a few things but none of them are working.我试图改变一些东西,但它们都不起作用。 As I trying to add the draggable
to the rectangular box the fields within that by default get the draggable directive
and hence their default
behavior is overridden by the angularjs directive
.当我尝试将draggable
对象添加到矩形框中时,默认情况下其中的字段会获取draggable directive
,因此它们的default
行为被angularjs directive
覆盖。 I would appreciate it if someone can provide me some guidance here.如果有人可以在这里为我提供一些指导,我将不胜感激。
The solution is simply to implement $event.stopPropagation();
解决方案是简单地实现$event.stopPropagation();
, what this does is prevent the related $event
from bubbling up and triggering other similar events. ,这样做是为了防止相关的$event
冒泡并触发其他类似事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.