我正在 AngularJS 中创建一个自定义的可拖动指令。它是 jQuery 事件和普通 JavaScript 的组合。我试图使其尽可能通用和可重复使用,而且它还必须是触摸友好的。
TL;DR
我无法在触摸环境中单击可拖动指令上的按钮。
重现步骤:
- 打开codepen示例:CodePen http://codepen.io/anon/pen/OPjvBm?editors=101
- 在 Chrome 上,F12,模拟 iPad 3/4
- 通过标题拖动面板 = 有效!
- 单击按钮 = 无警报。
更长的解释
该指令可以选择使其放置的整个元素可拖动,除非放置了具有“drag-handle”类的元素,在这种情况下,该元素用作该元素的拖动手柄。我通常将其与引导面板一起使用,因为这是一个简单的示例。
该指令在桌面上工作得很好,但是在触摸设备上,如果拖动手柄上有任何可单击的项目,则拖动处理程序将覆盖单击事件并且永远不会调用它。
HTML 示例如下:
<div class="panel panel-default" app-draggable>
<div class="panel-heading drag-handle"> <!-- Drag Handle -->
<div class="panel-title">
Example Title
<button onclick="alert('clicked')" class="btn btn-xs btn-primary pull-right" type="button">Click</button>
</div>
</div>
<div class="panel-body">Example body</div>
</div>
因此,在桌面上,您可以拖动面板,然后单击按钮来获取警报。然而,当我在 Chrome 上模拟 iPad 3/4(或在真正的 iPad 上将其拉起)时,点击永远不会被触发。
我的指令如下。它将容器设置为绝对容器(除非容器已经固定,在这种情况下它将进行补偿并仍然使其可拖动。
/*
* @summary
* Directive that makes an element draggable.
* @description
* This directive should be used in conjunction with specifying a drag handle
* on the element. If not, then entire element will be draggable.
* @example
* <div class='myDiv' app-draggable>
* <div class='drag-handle'>This will be the drag handle</div>
* <div>This will be dragged</div>
* </div>
*/
angular.module("app")
.directive('appDraggable', appDraggable);
function appDraggable() {
var directive = {
restrict: 'A',
link: link
};
function link(scope, element) {
var startX = 0, startY = 0, x = 0, y = 0;
var startTop;
var startLeft;
var dragHandle = element[0].querySelector(".drag-handle");
var dragHandleElement;
/*
* If there is a dragHandle specified, add the touch events to it.
* Otherwise, make the entire element draggable.
*/
if (dragHandle) {
dragHandleElement = angular.element(dragHandle);
addTouchHandlers(dragHandle);
} else {
dragHandleElement = element;
addTouchHandlers(element[0]);
}
var position = element.css('position');
if (position !== "absolute") {
if (position === "fixed") {
// If fixed, get the start offset relative to the document.
startTop = element.offset().top;
startLeft = element.offset().left;
/*
* Explicitly set the height and width of the element to prevent
* overrides by preset values.
*/
var height = parseInt(element.height(), 10);
var width = parseInt(element.width(), 10);
element.css({
height: height,
width: width
});
} else {
// If it's not fixed, it needs to be absolute.
element.css({
position: 'absolute',
});
// And positioned originally relative to the parent.
startTop = element.position().top;
startLeft = element.position().left;
}
}
/*
* @function
* @description
* Add event handlers to the drag handle to capture events.
*/
dragHandleElement.on('mousedown', function (event) {
/*
* Prevent default dragging of selected content
*/
event.preventDefault();
startX = event.pageX - x;
startY = event.pageY - y;
dragHandleElement.on('mousemove', mousemove);
dragHandleElement.on('mouseup', mouseup);
});
function mousemove(event) {
y = event.pageY - startY;
x = event.pageX - startX;
var finalTop = y + startTop;
var finalLeft = x + startLeft;
element.css({
top: finalTop + 'px',
left: finalLeft + 'px'
});
}
function mouseup() {
dragHandleElement.off('mousemove', mousemove);
dragHandleElement.off('mouseup', mouseup);
}
function touchHandler(event) {
var touch = event.changedTouches[0];
if (event.target !== dragHandleElement) {
//////////////// HACK ///////////////////////////
//event.target.click(); // Hack as a work around.
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function addTouchHandlers(element) {
element.addEventListener("touchstart", touchHandler, true);
element.addEventListener("touchmove", touchHandler, true);
element.addEventListener("touchend", touchHandler, true);
element.addEventListener("touchcancel", touchHandler, true);
}
}
return directive;
}
您会注意到上面的指令中有一个 hack:
if (event.target !== dragHandleElement) {
//////////////// HACK ///////////////////////////
//event.target.click(); // Hack as a work around.
}
如果我取消注释它,它可以在触摸设备上运行,因为它会检查触摸目标是否是 DragHandle,如果不是,则手动单击目标。这可行,但对我来说似乎很讨厌,我真的想要一个更好的解决方案。它不会返回 false 或 stopPropagation,因为目标并不总是直接拖动Handle,但它仍然需要拖动。
我不知道为什么这不起作用,因为它不会手动停止触摸事件的传播,因为它使用 event.preventDefault 而不是 event.stopPropagation,但我确信我错过了一些东西。
您可以重现here http://codepen.io/anon/pen/OPjvBm?editors=101.
此外,欢迎任何有关如何改进上述代码以更加平台设备无关或更强大的建议!
想法?
Thanks!