如何从angularjs中的子元素开始（'mousedown'，....）
Posted
技术标签:
【中文标题】如何从angularjs中的子元素开始（\'mousedown\'，....）【英文标题】：How to get on('mousedown', ....) from the child element in angularjs如何从angularjs中的子元素开始（'mousedown'，....） 【发布时间】：2014-10-14 09:31:32 【问题描述】：我从 angularjs 文档中得到了这个简单的拖动示例。 这是一个
plunk fork
但是，我正在尝试获取子节点的操作，因此它只会在单击子元素时拖动。我试过了：
var elementDrag=element[0].getElementsByClassName('dragThis');
elementDrag.on('mousedown', function(event)
// Prevent default dragging of selected content
event.preventDefault();
startX = event.pageX - x;
startY = event.pageY - y;
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
);
关于如何在不使用 jQuery 的情况下解决此问题的任何想法？
【问题讨论】：
【参考方案1】：这是一个快速而肮脏的实现，可以帮助您入门：http://plnkr.co/edit/1hBmpg51xqzxi0EP4WBg
试试看，如果您还有问题，请告诉我。控制器代码需要一些清理；-)。
该实现基于两个相互通信的指令。外部指令 (draggable-content) 公开了一个 API，允许内部指令 (draggable-control) 执行 de drag。
.directive('draggableControl', function($document)
return
require: '^draggableContent',
// The 4th arg of the link fn, ctrl, is the controller of the outer directive draggableContent
link: function(scope, element, attr, ctrl)
// more code
;
)
标记很简单：
<body ng-app="drag">
<div draggable-content>
<div draggable-control class="dragThis" style='border: 1px solid yellow; background:white;'>Drag here only</div>
DO NOT drag here<br><br><br>or here</div>
</body>
【讨论】：
谢谢你的帮助，我看看能不能让控制器工作。我在玩 event.layerY 并检查初始点击位置。你的回答给了我更多的线索。 我才意识到我没有保存 plunkr。请再试一次。【参考方案2】：基于@apairet plunkr，我能够完成指令。 这是我修复的：
function mouseup()
$document.off('mousemove', ctrl.mousemove);
$document.off('mouseup', mouseup);
ctrl.y = event.screenY - ctrl.startY;
ctrl.x = event.screenX - ctrl.startX;
谢谢，我了解了“^require”。
【讨论】：
以上是关于如何从angularjs中的子元素开始（'mousedown'，....）的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS操作DOM——angular.element
angularjs获取元素以及angular.element()用法
AngularJS操作DOM——angular.element