JavaScript 在网页上拖放一个 Div [重复]
Posted
技术标签:
【中文标题】JavaScript 在网页上拖放一个 Div [重复]【英文标题】：JavaScript Drag/Drop a Div on a Web Page [duplicate] 【发布时间】：2013-03-24 09:59:12 【问题描述】：我正在尝试编写一些 javascript 代码，让我可以在网页上移动 div。也就是说，我想这样做，以便您可以单击并将 div 从页面上的一个位置拖动到另一个位置。我的 JavaScript 似乎不合作。但是，我觉得我犯了一个非常简单的错误。或许另一双眼睛能发现我的问题？
感谢任何cmets。
下面是我的 JS、CSS 和 html：
JavaScript：
function getStyle(object, styleName)
if (window.getComputedStyle)
return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
else if (object.currentStyle)
return object.currentStyle[styleName];
function grabCalculator(e)
var evt = e || window.event;
calculator = evt.target || evt.srcElement;
var mousex = evt.clientX;
var mousey = evt.clientY;
diffx = parseInt(calculator.style.left) + mousex;
diffy = parseInt(calculator.style.top) + mousey;
addEvent(document, "mousemove", moveCalculator, false);
addEvent(document, "mouseup", dropCalculator, false);
function moveCalculator(e)
var evt = e || window.event;
var mousex = evt.clientX;
var mousey = evt.clientY;
calculator.style.left = mousex + diffx + "px";
calculator.style.top = mousey + diffy + "px";
function addEvent(obj, eventType, fnName, cap)
alert("TEST");
if (obj.attachEvent)
obj.attachEvent("on" + eventType, fnName);
else
obj.addEventListener(eventType, fnName, cap);
function removeEvent(obj, eventType, fnName, cap)
if (obj.attachEvent)
obj.detachEvent("off" + eventType, fnName);
else
obj.removeEventListener(eventType, fnName, cap);
function dropCalculator(e)
removeEvent(document, "mousemove", moveCalculator, false);
removeEvent(document, "mouseup", dropCalculator, false);
function init()
diffx = null;
diffy = null;
calculator = document.getElementById("calculator");
//store top and left values of calculator
calculator.style.top = getStyle(calculator, "top");
calculator.style.left = getStyle(calculator, "left");
calcButtonState = true;
window.onload = init;
CSS：
#calculator
position: absolute;
z-index: 1;
left: 37%;
top: 25%;
border: solid;
border-color: red;
background: black;
width: 25%;
height: 45%;
这只是相关的 CSS。
HTML：
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="main">
<!--Calculator-->
<div id="calculator">
</div>
<!--End calculator-->
<header>
<div id="title">
Conversion Formulas
</div>
</header>
<nav>
</nav>
<div id="content">
<div id="dryMeasureContent">
</div>
<div id="wetMeasureContent">
</div>
<div id="distanceContent">
</div>
<div id="temperatureContent">
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>
请注意，我的其他 HTML 标记已经到位，但是，*** 似乎不能很好地处理 HTML，因此它们不会出现。
【问题讨论】：
我总是要求人们把他们的 JS/HTML/CSS 放在jsfiddle.net 这里是小提琴链接：jsfiddle.net/TnCfY 【参考方案1】：首先，您的 init() 函数没有添加任何事件侦听器 - 这就是问题所在
尝试在此行之后添加addEvent(calculator, 'mousedown', moveCalculator);
calculator = document.getElementById("calculator");
希望你能理解我的想法
【讨论】：
成功！哇，我太傻了。 XD 计算器现在可以拖动并且可以更换。但是，它现在似乎在拖动时会跳离光标。 我其实改成addEvent(calculator, 'mousedown', grabCalculator); 很高兴能帮到你） 关于从光标跳转 - 在页面上的 div 中打印实时坐标，并尝试捕捉坐标发生大量变化的时刻，还可以考虑 scrollLeft/scrollTop 和其他坐标更正 这与我在grabCalculator() 和moveCalculator() 中的代码有关。我发现将它从grabCalculator（）中的“+ mousex and + mousey”更改为“/ mousex and / mousey”。它工作得更好。然而，仍然不完美。【参考方案2】：你看过 jquery library draggable http://jqueryui.com/draggable/ 和 droppable http://jqueryui.com/droppable/ 吗？
我使用这些库取得了巨大的成功。
超级超级容易实现。
【讨论】：
不幸的是，我对这个问题的解决方案必须更加“从头开始”，而不是使用我可以使用的库。 :// 真是个无赖的人：P【参考方案3】：W3Schools 有一个很棒的关于使用 HTML5 和 javascript 拖放的教程。
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
ev.preventDefault();
function drag(ev)
ev.dataTransfer.setData("Text",ev.target.id);
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" >
</body>
</html>
【讨论】：
以上是关于JavaScript 在网页上拖放一个 Div [重复]的主要内容，如果未能解决你的问题，请参考以下文章