[英]How can I make a nested element not draggable in a draggable container?
我在父容器上使用 HTML5 拖放,但我想禁用对它的某些子容器的拖放效果,特别是输入,以便用户可以轻松选择/编辑输入内容。
示例: https : //jsfiddle.net/Luzub54b/
<div class="parent" draggable="true">
<input class="child" type="text" value="22.99"/>
</div>
默认情况下,Safari 似乎对输入执行此操作,因此请在 Chrome 或 Firefox 上尝试。
我正在寻找类似的东西,并使用 mousedown 和 mouseup 事件找到了一个可能的解决方案。 这不是最优雅的解决方案,但它是唯一一个在 chrome 和 firefox 上都对我始终有效的解决方案。
我在你的小提琴中添加了一些 javascript: Fiddle
;
(function($) {
// DOM Ready
$(function() {
$('input').on('mousedown', function(e) {
e.stopPropagation();
$('div.parent').attr('draggable', false);
});
$(window).on('mouseup', function(e) {
$('div.parent').attr('draggable', true);
});
/**
* Added the dragstart event handler cause
* firefox wouldn't show the effects otherwise
**/
$('div.parent').on({
'dragstart': function(e) {
e.stopPropagation();
var dt = e.originalEvent.dataTransfer;
if (dt) {
dt.effectAllowed = 'move';
dt.setData('text/html', '');
}
}
});
});
}(jQuery));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.