JavaScript 在网页上拖放一个 Div


JavaScript Drag/Drop a Div on a Web Page

本问题已经有最佳答案，请猛点这里访问。

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

感谢任何评论。

下面是我的 JS、CSS 和 HTML：

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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:

1
2
3
4
5
6
7
8
9
10
11
12
#calculator
{
position: absolute;
z-index: 1;
left: 37%;
top: 25%;
border: solid;
border-color: red;
background: black;
width: 25%;
height: 45%;
}

这只是相关的 CSS。

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE HTML>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="style.css">
        <script type="text/javascript" src="javascript.js">
    </head>

<body>

   

        <!--Calculator-->
       
       
        <!--End calculator-->

        <header>

           
                Conversion Formulas
           

        </header>

        <nav>
        </nav>

       

           
           

           
           

           
           

           
           

       

        <footer>
        </footer>

   

</body>
</html>

请注意，我的其他 HTML 标记已经到位，但是，stackoverflow 似乎不能很好地处理 HTML，因此它们不会出现。

相关讨论

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

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

calculator = document.getElementById("calculator");

希望你能理解我的想法

相关讨论

你看过 jquery library draggable http://jqueryui.com/draggable/ 和 droppable http://jqueryui.com/droppable/ 吗？

我使用这些库取得了巨大的成功。

超级超级容易实现。

相关讨论

W3Schools 有一个关于使用 HTML5 和 javascript 拖放的很棒的教程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML>
<html>
<head>

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));
}

</head>
<body>
 

   <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>