HTML5拖放和触摸文本

Posted 2023-03-04

【中文标题】HTML5拖放和触摸文本

【英文标题】：HTML5 Drag & Drop and touching text

【发布时间】：2012-12-13 15:05:06

【问题描述】：

我在 html5 中的拖放有一个奇怪的问题。

有 3 个目标区域是包含文本的 div，还有 1 个源区域是包含图像的 div。

我使用 dragenter 和 dragleave 事件来改变活动目标区域的边框，以投影被拖动对象将要降落的位置。

问题是，一旦你将它拖到文本上，它会出于某种原因触发 dragleave 事件，移除边框。

Here is a jsfiddle example illustrating the problem

这是一些内联代码：

HTML

<h1>Targets</h1>
<div class="targets">
    <div class="target">I am a target<br/>Touch text while dragging to see the problem</div>
    <div class="target">I am a target<br/>Touch text while dragging to see the problem</div>
    <div class="target">I am a target<br/>Touch text while dragging to see the problem</div>
</div>
<h1>Source</h1>
<div class="source" draggable="true">
    <img class="source_image" src="http://lorempixel.com/output/technics-q-c-184-69-8.jpg"   />
</div>

JS

$("div.source").on('dragstart', function(e) 
    $(this).fadeTo('slow', 0.4);
);

$("div.source").on('dragend', function(e) 
    $(this).fadeTo('slow', 1);
);

$("div.target").on('dragover', function(e) 
    if (e.preventDefault) 
        e.preventDefault();
    

    e.dataTransfer.dropEffect = 'move';

    return false;
);

$("div.target").on('dragenter', function(e) 
    $(this).addClass('over');
);

$("div.target").on('dragleave', function(e) 
    $(this).removeClass('over');
);

CSS

h1 
    font-size: 2em;
    text-align: center;


.target 
    margin: 1em;
    display:inline-block;
    width: 184px;
    height: 69px;
    border: 5px #995555 solid;
    border-radius: 5px;
    background-color: #AAAAAA;
    vertical-align: bottom;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 0.9em;


.target.over 
    border: 5px #0A0 dashed;


.source 
    margin: 1em;
    display:inline-block;
    width: 184px;
    height: 69px;
    border: 5px #555599 solid;
    border-radius: 5px;
    background-color: #CCCCCC;
    vertical-align: bottom;
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;      

有没有人知道即使在触摸文本时也能保持边框变化的任何解决方案？

另一个问题是是否可以保持被拖动的源 div 周围的边框？

最后一点，我意识到这两件事都可以通过使用可拖放的 jQuery UI 来完成，但我特别想知道是否可以使用原生 HTML5 拖放来做到这一点。

【参考方案1】：

问题在于文本在 DOM 中构成了一个额外的节点，dragleave 和 dragenter 既考虑了子元素，也考虑了父元素。当光标进入文本节点时，它离开div。这类似于mouseout vs mouseleave 问题。解决此问题的一种简单方法是保留事件计数，并且仅在所有事件都考虑在内时才删除样式：

var count=0;
$("div.target").on('dragenter', function(e) 
    $(this).addClass('over');
    count++;
).on('dragleave', function(e) 
    if (--count<=0) 
        $(this).removeClass('over');
    
);

This isn't necessarily completely reliable（请记住在drop 事件中将count 设置为零），但它会比您当前的设置更好。另一种选择是根本不在 div 元素中添加任何内容，而是使用 CSS 添加：

.target:after 
    content: 'I am a target \A Touch text while dragging to see the problem';
    white-space: pre-wrap;

这有一些可访问性的缺点，因为生成的内容对辅助技术是不可见的，并且只会让您添加文本，但在许多方面a cleaner solution。

【讨论】：

非常感谢，通过 CSS 的第二个解决方案非常完美！由于这只是为了我正在从事的“为了好玩”项目，可访问性不是主要问题，我对寻找干净的解决方案和学习相对较新的技术更感兴趣。作为一个额外的问题，有没有办法在拖动时保留边框？再次，非常感谢！

@Bio2hazard 我不这么认为，但如果您还有其他问题，请提出其他问题。

@robertc 我有类似的问题here 在 javascript 中拖放。如果可能的话，你能帮我吗？任何帮助将不胜感激。