cli*_*ame 38 javascript html5 drag-and-drop
我有一个调试器日志,我用JavaScript编写了一个我正在研究的项目.该日志基本上是<aside>HTML5中的标记,仅在需要时显示.我想玩弄能够在屏幕上移动日志的想法,因为它可能会重叠某些事情(这对我的项目来说很好).但是,我似乎无法弄清楚如何使用HTML5正确地拖放标签,以便它可以放置在屏幕上的任何位置(好吧,或在<div>元素内).
在阅读HTML5的拖放支持后,我对它的工作方式有了基本的了解,但是我不知道在允许将div放在任何地方时从哪里开始(它的z-index是一个很高的值,所以正如我所说,重叠很好).
有什么建议？
哦,我想尽可能避免在这个项目中使用外部库.我试图用纯JavaScript/HTML5来做这件事.
rob*_*rtc 106
拖放不会移动元素,如果您希望元素在放下时移动,则必须在放置事件中设置元素的新位置.我已经做了一个适用于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();
return false;
}
该drop事件解包偏移并使用它们相对于鼠标指针定位元素.
当任何事情被拖延时,dragover事件只需要preventDefault.同样,如果页面上还有其他任何可拖动的内容,您可能需要在此处执行更复杂的操作:
function drag_over(event) {
event.preventDefault();
return 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中使用它,你需要将它转换aside为一个a元素,当然,所有的事件绑定代码都是不同的.据我所知,拖放API在Opera或任何移动浏览器中都不起作用.另外,我知道你说你不想使用jQuery,但跨浏览器事件绑定和操作元素位置是jQuery更容易的事情.
对于多件物品的情况,我调整了一点robertc的好答案.这里的second班级名称仅适用于其他职位.
<aside draggable="true" class="dragme" data-item="0">One</aside>
<aside draggable="true" class="dragme second" data-item="1">Two</aside>
将data-item属性添加到setData函数中.
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 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;
}
并通过类循环遍历所有元素dragme.
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);
}
小智 5
感谢您的回答.它在Chrome和Firefox中运行良好.我调整它在IE中工作.Below是代码.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Fri, 27 Jun 2014 21:02:23 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
li
{
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;
}
</style>
<script>
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
var str = (parseInt(style.getPropertyValue("left")) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top")) - event.clientY) + ',' + event.target.id;
event.dataTransfer.setData("Text", str);
}
function drop(event) {
var offset = event.dataTransfer.getData("Text").split(',');
var dm = document.getElementById(offset[2]);
dm.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
event.preventDefault();
return false;
}
function drag_over(event) {
event.preventDefault();
return false;
}
</script>
</head>
<body ondragover="drag_over(event)" ondrop="drop(event)">
<ul>
<li id="txt1" draggable="true" ondragstart="drag_start(event)"> Drag this text </li><br>
<li id="txt2" draggable="true" ondragstart="drag_start(event)"> Drag me</li>
</ul>
<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>
</body>
</html>| 归档时间： |
|
| 查看次数： |
56750 次 |
| 最近记录： |