在网页上拖放一个Div

JavaScript Drag/Drop a Div on a Web Page

本文关键字：一个 Div 网页 拖放      更新时间：2023-09-26

我正在尝试编写一些JavaScript，允许我在网页上移动div。也就是说，我想让它使您可以单击并将div从页面上的一个位置拖动到另一个位置。我的JavaScript似乎不合作。然而，我觉得我犯了一个非常简单的错误。也许另一双眼睛能发现我的问题?

欢迎评论

下面是我的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标签是到位的，然而，stackoverflow似乎不能很好地处理HTML，所以它们没有出现

首先，您的init()函数没有添加任何事件侦听器—这是问题所在

尝试在这行后面添加addEvent(calculator, 'mousedown', moveCalculator);

calculator = document.getElementById("calculator");

我希望你能理解我的想法

您看过jquery库draggable http://jqueryui.com/draggable/和dropable http://jqueryui.com/droppable/吗?

我已经成功地使用了这些库。

超级超级容易实现

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)" width="336" height="69">
</body>
</html>
相关文章：