第一次拖放后拖放（javascript）中斷
[英]Drag and Drop (javascript) breaks after first drop
問題描述
因此，它的作用是：您可以成功地將某物拖動到任何地方，但是當再次單擊它時，它會重置到其原始位置（我不知道為什么），並且當您嘗試再次拖動它時（光標一觸摸到它）它消失的對象（我不知道為什么）。 我希望有人能告訴我為什么會這樣以及如何解決它！
// JavaScript Document
var posX;
var posY;
var element;
function drag() {
element = document.getElementById("square");
posX = event.clientX;
posY = event.clientY;
element.addEventListener("mousemove", move, false);
}
function move() {
element.addEventListener("mouseup", drop, false);
element.style.left = event.clientX - posX + "px";
element.style.top = event.clientY - posY + "px";
}
function drop() {
element.removeEventListener("mousemove", move, false);
element.removeEventListener("mouseup", drop, false);
}
html是一個簡單的（位置設置為相對）：
<p id="square" onmousedown="drag(event)">哭聲</p>
最后，最重要的是，謝謝大家的時間=]
3 個解決方案
解決方案1
0 2011-02-20 16:10:31
這個答案可能使我感到沮喪，但是這到底是什么。 您是否考慮過使用jQuery和jQuery UI庫。 他們的拖放工作非常好： Draggable 。 這可能更易於使用，然后嘗試自己解決。
解決方案2
0 2011-02-20 16:46:23
嘗試這個
function drag(element) {
element.style.left = event.clientX + 'px';
element.style.top = event.clientY + 'px';
}
。
<p id="square" ondrag="drag(this);" ondragend="drag(this);">meep</p>
解決方案3
0 已采納 2011-02-20 16:53:08
posX = event.clientX;
posY = event.clientY;
問題在於，這些值始終設置為點擊距主體頂部的偏移量，而不是正方形元素頂部的偏移量。 第一次，它們工作得很好，因為與主體頂部的偏移與元素的偏移相同，因為其位置正好位於主體上。 一旦將其移動，它就會從剛移動到的位置偏離身體的側面。 當您用鼠標拖動它時，它將在鼠標位置移到您剛剛移動到的像素數上時移動它。 這通常會將其完全移出屏幕。 您希望元素隨鼠標一起移動，元素的頂部相對於鼠標保持在相同位置。
如果這樣做沒有意義，請發表評論，我會嘗試使其更清晰。 ：D
這為我工作：
<html>
<head>
<script type="text/javascript">
// JavaScript Document
var posX;
var posY;
var element;
function drag(event) { //added event parameter
element = document.getElementById("square");
posX = event.clientX - parseInt( element.offsetLeft ); //this is the big change!
posY = event.clientY - parseInt( element.offsetTop );
element.addEventListener("mousemove", move, false);
}
function move(event) { //added event parameter
if (typeof(document.getElementById("square").mouseup) == "undefined") { //this just prevents redundantly adding the same event handler repeatedly, even though duplicates are removed anyway
element.addEventListener("mouseup", drop, false);
}
element.style.left = event.clientX - posX + "px";
element.style.top = event.clientY - posY + "px";
}
function drop() {
element.removeEventListener("mousemove", move, false);
element.removeEventListener("mouseup", drop, false);
}
</script>
<style type="text/css">
body {
width: 1000px;
height: 1000px;
background-color: blue;
}
p {
position: relative;
background-color: red;
width: 100px;
height: 100px;
left: 1px;
top: 1px;
}
</style>
<body>
<p id="square" onmousedown="drag(event)">meep</p>
</body>
</html>
中斷拖放范圍
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.