如何在HTML 5中拖放一個改變css left和top屬性的div？

我想對HTML 5中的div執行拖放。目標是在主容器中的任何位置移動div。如何在HTML 5中拖放一個改變css left和top屬性的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合作過）。

感謝您的幫助。

來源

2011-03-23 obo

爲什麼不使用jQuery UI？看到我的問題/答案http://stackoverflow.com/questions/536676/how-to-draw-a-line-between-draggable-and-droppable很長一段時間，我不改變來源，玩較新的版本，但你會得到的。 – balexandre 2011-03-23 09:37:20

我寧可不要。而且我認爲這對於HTML5 ... – obo 2011-03-23 13:30:11

來說很容易，因爲你自己的緣故，在HTML5中從來沒有做過這樣的事情，很多仍然使用IE8/7，FF3等......在那裏不支持這樣的花哨的東西:) – balexandre 2011-03-23 14:53:15

我會遵循這個好建議，而不是使用jquery。我在這裏找到了我需要的演示和代碼：jQuery UI - draggable demo。

來源

2011-03-23 20:12:20 obo

看看：http：//html5demos.com/drag - 可能有幫助。 – 2011-03-23 20:22:56

如何在HTML 5中拖放一個改變css left和top屬性的div？

回答

相關問題