当元素被抓取/拖动时，如何删除被选中的文本？

Posted 2023-05-08

【中文标题】当元素被抓取/拖动时，如何删除被选中的文本？

【英文标题】：How do you remove the text that s being picked when the element is being grapped/dragged?

【发布时间】：2020-11-09 07:23:50

【问题描述】：

我试图在抓住/拖动元素时删除背景文本图像。我似乎找不到修复它的方法。

我参考了这个链接 html5 Drag and Drop anywhere on the screen

function drag_start(event) 
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("text/plain",
    (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
 
function drag_over(event)  
    event.preventDefault(); 
    return false; 
 
function drop(event)  
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('divTile');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    event.preventDefault();
    return false;
 
var dm = document.getElementById('divTile'); 
dm.addEventListener('dragstart',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',drop,false); 

谢谢

【问题讨论】：

这是小提琴：jsfiddle.net/mLr6jh1p/1

您好，您需要移除红色背景色还是需要在拖动时从气泡中移除This？

【参考方案1】：

可以使用伪 before | after 类来完成，请参见下面的示例

function drag_start(event) 
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("text/plain",
    (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
    
 
function drag_over(event)  
    event.preventDefault(); 
    return false; 
 
function drop(event)  
  event.preventDefault();
  var offset = event.dataTransfer.getData("text/plain").split(',');
  var dm = document.getElementById('divTile');
  dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
  dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
  return false;
 
var dm = document.getElementById('divTile'); 
dm.addEventListener('dragstart',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',drop,false); 

#divTile  
    position:  absolute;
    left: 0;
    top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
    background-color: red;
    min-width: 50px;
    min-height: 1em;
    background: red; 
    border: 2px  solid rgba(0,0,0,0.5); 
    border-radius: 50%; padding: 8px;
    z-index:2

#divTile::after
  position: absolute;
  top: 0; left: 0; 
  width: calc(100% + 4px); height:calc(100% + 4px);
  content: '';
  z-index:-1

<aside draggable="true" id="divTile">
    This 
</aside>
<p>I never am really satisfied that I understand anything; because, understand it well as I may, my comprehension can only be an infinitesimal fraction of all I want to understand about the many connections and relations which occur to me, how the matter in question was first thought of or arrived at, etc., etc.</p>
<p>In almost every computation a great variety of arrangements for the succession of the processes is possible, and various considerations must influence the selections amongst them for the purposes of a calculating engine. One essential object is to choose that arrangement which shall tend to reduce to a minimum the time necessary for completing the calculation.</p>
<p>Many persons who are not conversant with mathematical studies imagine that because the business of [Babbage’s Analytical Engine] is to give its results in numerical notation, the nature of its processes must consequently be arithmetical and numerical, rather than algebraical and analytical. This is an error. The engine can arrange and combine its numerical quantities exactly as if they were letters or any other general symbols; and in fact it might bring out its results in algebraical notation, were provisions made accordingly.</p>
<p>The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform. It can follow analysis, but it has no power of anticipating any analytical revelations or truths. Its province is to assist us in making available what we are already acquainted with.</p>