如何使嵌套元素在可拖动容器中不可拖动?
Posted
技术标签:
【中文标题】如何使嵌套元素在可拖动容器中不可拖动?【英文标题】:How can I make a nested element not draggable in a draggable container? 【发布时间】:2016-06-19 10:30:30 【问题描述】:我在父容器上使用 html5 拖放,但我想禁用对其某些子容器的拖动效果,特别是输入,以便用户可以轻松选择/编辑输入内容。
示例: https://jsfiddle.net/Luzub54b/
<div class="parent" draggable="true">
<input class="child" type="text" value="22.99"/>
</div>
Safari 似乎默认对输入执行此操作,因此请在 Chrome 或 Firefox 上尝试。
【问题讨论】:
周围有很多可拖动的库 这是一个非常基本的功能,我觉得应该可以使用纯 html 和最少的 javascript。 当然...如果您想处理已经标准化并在现有库中有选项的跨浏览器问题 您需要在文本输入上设置 evt.preventDefault()。好老的 JS。 这使得输入实际上是只读的。您不能编辑或选择输入值 【参考方案1】:我一直在寻找类似的东西,并找到了使用 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));
【讨论】:
谢谢!这非常有效。我对代码fiddle 做了一些小改动,以删除窗口上的事件处理程序,但这更多是个人喜好。 您可能应该添加一个鼠标离开监听器并将父拖动设置为 true,因此如果用户单击嵌套元素并在单击时将鼠标拖出,则可拖动属性不会保持为 false以上是关于如何使嵌套元素在可拖动容器中不可拖动?的主要内容,如果未能解决你的问题,请参考以下文章