通过 Javascript 拖放类 (HTML5)

Posted 2023-05-08

【中文标题】通过 Javascript 拖放类 (HTML5)

【英文标题】：Drag and Drop (HTML5) for Class via Javascript

【发布时间】：2018-09-23 14:46:12

【问题描述】：

我正在https://***.com/questions/34382935/drag-and-drop-anywhere-on-screen-with-multiple-elements-of-the-same-id-class-and#=跟进这个问题

现在，我正在将这个有效的解决方案用于 jsfiddle 上的一个侧边元素 由 robertc 为这个 *** 问题创建：html5: dragover(), drop(): how get current x,y coordinates?

这是当前的代码：（感谢 robertc）

function drag_start(event) 
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("text",
    (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").split(','); 
    var dm = document.getElementById('dragme');
    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('dragme'); 
dm.addEventListener('dragstart',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',drop,false); 

aside  
    position:  absolute;
    left: 0;
    top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
    width: 200px; 
    background: rgba(255,255,255,0.66); 
    border: 2px  solid rgba(0,0,0,0.5); 
    border-radius: 4px; padding: 8px;

<aside draggable="true" id="dragme">
    This is an aside, drag me.
</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>

它非常适用于唯一 ID 的单个元素。但是，我正在尝试使其适用于同一类的多个元素（单独拖动）。我尝试了很多次，但都无济于事，我也找不到解决办法。

我想知道是否有任何 HTML/javascript 专家可以提供帮助？谢谢！

【问题讨论】：

请解释问题是什么，你只是想要多个可拖动的旁边吗？

【参考方案1】：

我对您的问题的理解是您希望能够在页面上拥有多个可拖动对象。

感谢用户@Ingvi，答案位于here。来自here 的用户的原始 PEN。

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) + ',' + event.target.getAttribute('data-item'));


function drag_over(event) 
  event.preventDefault();
  return false;


function drop(event) 
  var offset = event.dataTransfer.getData("text/plain").split(',');
  var dm = document.getElementsByClassName('dragme');
  dm[parseInt(offset[2])].style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
  dm[parseInt(offset[2])].style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
  event.preventDefault();
  return false;


var dm = document.getElementsByClassName('dragme');
for (var i = 0; i < dm.length; i++) 
  dm[i].addEventListener('dragstart', drag_start, false);
  document.body.addEventListener('dragover', drag_over, false);
  document.body.addEventListener('drop', drop, false);

aside 
  position: absolute;
  left: 0;
  top: 0;
  /* set these so Chrome doesn't return 'auto' from getComputedStyle */
  width: 200px;
  background: rgba(255, 255, 255, 0.66);
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  padding: 8px;

<aside draggable="true" class="dragme" data-item="0">One</aside>
<aside draggable="true" class="dragme second" data-item="1">Two</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>