如何拖放 div 更改 HTML 5 中的 css left 和 top 属性？答案

【问题标题】：How to drag and drop a div changing the css left and top attributes in HTML 5?如何拖放 div 更改 HTML 5 中的 css left 和 top 属性？
【发布时间】：2011-03-23 08:55:29
【问题描述】：

我想在 HTML 5 中对 div 执行拖放操作。目标是将 div 移动到主容器中的任何位置。

这是我的html代码：

<html>
<head>
    <title>Mon document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="dragndrop.js"></script>
</head>

<body ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);">
    <div class="box" draggable="true">
        Drag me if you can !
    </div>
</body>

style.css：

.box {
      position: absolute;
      top: 100px;
      left: 400px;
      color: white;
      background-color: #6495ED;
      border: 10px solid #6495ED;
      -webkit-box-shadow: 4px 4px 6px #999; 
      box-shadow: 4px 4px 12px #555;
      border-radius: 7px; 
      width: 150px;
      height: 150px;
}

body {
      background-color:#EEEEEE;
}

还有javascript：

var mouseX;                         // Current mouse X           coordinate
var mouseY;                         // Current mouse Y  coordinate

document.onmousemove = mouseMove;

function dragStart(event) {
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData("Text", event.target.getAttribute('id'));
}

function dragOver(event) {
return false;
}

function drop(event) {
ev = event || window.event;
mouseX = ev.pageX;
mouseY = ev.pageY;

var element = event.dataTransfer.getData("Text");

document.getElementById(element).style.left = mouseX+"px";
document.getElementById(element).style.top = mouseY+"px";

event.stopPropagation();

return false;
}

它不起作用，所以我认为javascript函数下降有问题。但是我看不到什么（在那之前我从未使用过js）。

感谢您的帮助。

【问题讨论】：

为什么不使用 jQuery UI？看到我的问题/答案stackoverflow.com/questions/536676/… 很长一段时间我不更改源，玩新版本，但你会得到它。
我宁愿不要。而且我认为使用 html 5 很容易做到这一点......
看在你自己的份上，千万不要在 HTML5 中做这样的事情，很多人仍然使用 IE8/7、FF3 等……不支持这些花哨的东西:)
@balexandre 哈哈，伙计，IE 介绍了这个和许多 HTML API。不错的尝试。

标签： javascript css html drag-and-drop

【解决方案1】：

我将遵循这个好建议并改用 jquery。我在这里找到了我需要的演示和代码：jQuery UI - draggable demo。

【讨论】：