我正在使用原生HTML拖动我的角度应用程序,我发现此事件闪烁问题
This回答并没有解决我的问题,因为他们正在手动移动元素。我将其留在本机实现上。
我的简化代码:
var app = angular.module('app', []);
app.directive('amDnd', function() {
return {
scope: true,
link: function($scope, $element, $attr) {
var el = $element[0];
el.draggable = true;
el.addEventListener('dragenter', function dragEnter(e) {
console.log($scope.$id, 'dragEnter');
}, false);
el.addEventListener('dragleave', function dragEnter(e) {
console.log($scope.$id, 'dragleave');
}, false);
}
};
});

div[am-dnd] {
border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div am-dnd>
<p>DRAG ME</p>
</div>
<div am-dnd>
<h3>DRAG OVER THIS AREA</h3>
<p>See the console, drag enter and leave are fired again and again while draging over
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quisquam, eaque, iure mollitia similique magnam voluptatem blanditiis distinctio nemo! Laboriosam porro iste maiores sequi magnam similique ad, in at. Omnis.</p>
</div>
</div>
&#13;
答案 0 :(得分:4)
我感觉“闪烁”问题的根源是第二个dragenter
指令的每个子元素发生dragleave
/ am-dnd
个事件。有一个Stack Overflow问题,讨论了此here的修复程序。
您可能能够声明这样的CSS规则:
.child-elements {
pointer-events: none;
}
...并在事件触发期间使用jqLite将此类应用于am-dnd
指令的所有子元素:
element.children().addClass("child-elements");
我做了一个JSFiddle,当第一个指令被拖过第二个指令时,“闪烁”事件被最小化,但是第二个指令被拖过第一个指令仍然存在一些问题。不过,我希望这能指出你正确的方向。
var app = angular.module('app', []);
app.directive('amDnd', function () {
return {
scope: true,
link: function (scope, element, attrs) {
element.attr('draggable', 'true');
element.on('dragenter', function () {
element.children().addClass("child-elements");
console.log('dragEnter');
});
element.on('dragleave', function () {
element.children().removeClass("child-elements");
console.log('dragleave');
});
}
};
});
答案 1 :(得分:1)
最符合我需求的解决方案:
var app = angular.module('app', []);
app.directive('amDnd', function() {
return {
scope: true,
link: function($scope, $element, $attr) {
var el = $element[0],
counter = 0;
el.draggable = true;
el.addEventListener('dragenter', function dragEnter(e) {
if (e.target === el && !counter) {
console.log($scope.$id, 'dragEnter');
}
counter++;
}, false);
el.addEventListener('dragleave', function dragLeave(e) {
counter--;
if (e.target === el && !counter) {
console.log($scope.$id, 'dragleave');
}
}, false);
}
};
});
div[am-dnd] {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div am-dnd id='id1'>
<p>DRAG ME</p>
</div>
<div am-dnd id='id2'>
<h3>DRAG OVER THIS AREA</h3>
<p>See the console, drag enter and leave are fired again and again while draging over
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi quisquam, eaque, iure mollitia similique magnam voluptatem blanditiis distinctio nemo! Laboriosam porro iste maiores sequi magnam similique ad, in at. Omnis.</p>
</div>
</div>