HTML5 拖放到屏幕上的任意位置

问题描述

我有一个用 JavaScript 为我正在处理的项目编写的调试器日志.日志基本上是 HTML5 中的 <aside> 标记，仅在需要时显示.我想尝试一下能够在屏幕上移动日志的想法，因为它可能会重叠某些东西(这对我的项目来说很好).但是，我似乎无法弄清楚如何使用 HTML5 正确拖放标签，以便它可以放置在屏幕上的任何位置(嗯，或者在 <div> 元素内).

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).

在阅读了 HTML5 的拖放支持之后，我对它的工作原理有了基本的了解，但是我不确定在允许将 div 放置在任何地方时从哪里开始(它的 z-index 很高值，正如我所说，重叠很好).

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).

有什么建议吗?

哦，我想尽可能避免在这个项目中使用外部库.我正在尝试在纯 JavaScript/HTML5 中执行此操作.

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.

推荐答案

拖放不会移动元素，如果您希望元素在拖放时移动，则必须将元素的新位置设置为掉落事件.我已经做了一个示例，它适用于 Firefox 和 Chrome，这里是关键点:

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

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

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

drop 事件解包偏移量并使用它们相对于鼠标指针定位元素.

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

dragover 事件只需要在拖动任何东西时preventDefault.同样，如果页面上还有其他可拖动的内容，您可能需要在此处执行更复杂的操作:

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

因此将它与 drop 事件一起绑定到 document.body 以捕获所有内容:

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

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

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 拖放到屏幕上的任意位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！