HTML5拖放到屏幕上的任何地方 [英] HTML5 Drag and Drop anywhere on the screen

问题描述

我有一个调试器日志，我用JavaScript编写了一个我正在开发的项目。日志基本上是HTML5中仅显示需要的< aside> 标签。我想玩弄可以在屏幕上移动日志的想法，因为它可能与某些事情重叠（这对我的项目很好）。但是，我似乎无法弄清楚如何使用HTML5来正确地拖放标签，以便将其放置在屏幕上的任何位置（或者在< div> 元素）。

在阅读HTML5的拖放支持后，我对它的工作原理有一个基本的了解，但我不知道从哪里开始当涉及到允许div放置在任何地方（它的z-index是一个很高的价值，所以我说，重叠是好的）。

任何建议？ / p>

哦，我想尝试避免在可能的情况下为这个项目使用外部库。我试图用纯粹的JavaScript / HTML5来做到这一点。

解决方案

拖放不会移动元素，如果你想要元素移动，当你删除它，然后你必须设置元素在放置事件中的新位置。我在做了一个例子，它在Firefox和Chrome中工作，这里是要点：

  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））; 
} 
  

dragstart 事件将鼠标指针从元素的左侧和顶部偏移出来，并将其传递到 dataTransfer 中。我不用担心传递ID，因为页面上只有一个可拖动的元素 - 没有链接或图像 - 如果你的页面上有任何东西，那么你必须在这里做更多的工作。 >

  function drop（event）{
 var offset = event.dataTransfer.getData（text / plain）。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（）; 
返回false; 
} 
  

drop 解压缩偏移量并使用它们相对于鼠标指针定位元素。

dragover 事件只需要任何东西拖动时， preventDefault 再次，如果页面上有任何可拖动的东西，您可能需要在这里做更复杂的事情：

  function drag_over（event） {
 event.preventDefault（）; 
返回false; 
} 
  

所以绑定到 document.body 以及 drop 事件来捕获所有内容：

  var dm = document.getElementById（'dragme'）; 
 dm.addEventListener（'dragstart'，drag_start，false）; 
 document.body.addEventListener（'dragover'，drag_over，false）; 
 document.body.addEventListener（'drop'，drop，false）; 
  

如果你想让这个工作在IE中，你需要转换将另存为 a 元素，当然，所有事件绑定代码都将不同。拖放API在Opera或任何移动浏览器上都不起作用，据我所知。另外，我知道你说你不想使用jQuery，但跨浏览器事件的绑定和操纵元素的位置是jQuery使得更容易的东西。

I have a debugger log that I've written in JavaScript for a project I'm working on. The log is basically an <aside> tag in HTML5 that only shows when needed. I wanted to play around with the idea of being able to move the log around the screen, as it may overlap certain things (which is fine for my project). However, I can't seem to figure out how to use HTML5 to properly drag and drop the tag so that it can be placed anywhere on the screen (well, or within a <div> element).

After reading on HTML5's drag and drop support, I have a basic understanding of how it works, but I'm not sure where to start when it comes to allowing the div to be placed anywhere (it's z-index is a high value, so as I said, overlapping is fine).

Any suggestions?

Oh, and I'd like to try and avoid using external libraries for this project, wherever possible. I'm trying to do this in pure JavaScript/HTML5.

解决方案

Drag and drop doesn't move elements around, if you want the element to move when you drop it then you have to set the new position of the element in the drop event. I've done an example which works in Firefox and Chrome, here are the key points:

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));
} 

The dragstart event works out the offset of the mouse pointer from the left and top of the element and passes it in the dataTransfer. I'm not worrying about passing the ID because there's only one draggable element on the page - no links or images - if you have any of that stuff on your page then you'll have to do a little more work here.

function drop(event) {
    var offset = event.dataTransfer.getData("text/plain").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;
}

The drop event unpacks the offsets and uses them to position the element relative to the mouse pointer.

The dragover event just needs to preventDefault when anything is dragged over. Again, if there is anything else draggable on the page you might need to do something more complex here:

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

So bind it to the document.body along with the drop event to capture everything:

var dm = document.getElementById('dragme');
dm.addEventListener('dragstart',drag_start,false);
document.body.addEventListener('dragover',drag_over,false);
document.body.addEventListener('drop',drop,false); 

If you want this to work in IE you'll need to convert the aside to an a element, and, of course, all the event binding code will be different. The drag and drop API doesn't work in Opera, or on any mobile browsers as far as I'm aware. Also, I know you said you don't want to use jQuery, but cross browser event binding and manipulating element positions are the sort of things that jQuery makes much easier.

这篇关于HTML5拖放到屏幕上的任何地方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！