Question

在这个javascript中，组件拖动功能不起作用。该问题仅发生在我的网站中。在SO的代码片段中，它可以正常运行。您可以在此处查看测试：https://screensos.github.io/Windowing.js/test.html 有人知道为什么会这样吗？

＆＃13;

var selected = null, // Object of the element to be moved
    x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
    x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element

// Will be called when user starts dragging an element
function _drag_init(elem) {
    // Store the object of the element which needs to be moved
    selected = elem;
    x_elem = x_pos ;
    y_elem = y_pos;
}

// Will be called when user dragging an element
function _move_elem(e) {
    x_pos = document.all ? window.event.clientX : e.pageX;
    y_pos = document.all ? window.event.clientY : e.pageY;
    if (selected !== null) {
        selected.style.left = (x_pos) + 'px';
        selected.style.top = (y_pos) + 'px';
    }
}

// Destroy the object when we are done
function _destroy() {
    selected = null;
}

// Bind the functions...
var draggables = document.getElementsByClassName('draggable-element');
for(var i = 0; i < draggables.length; i++){
  draggables[i].onmousedown = function () {
      _drag_init(this);
      return false;
  };
}

document.onmousemove = _move_elem;
document.onmouseup = _destroy;

＆＃13;

body {padding:10px}

.draggable-element {
  width:125px;
  height:125px;
  background-color:#666;
  color:white;
  padding:10px 12px;
  cursor:move;
  position:relative; /* important (all position that's not `static`) */
}

＆＃13;

<body id="body">
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
</body>

＆＃13;

提前致谢。您可以在本地尝试，方法是从此处下载源代码：https://github.com/ScreensOS/Windowing.js

更新：错误是放置在错误位置的javascript标记。而不是在head标签之后，现在放在body标签的结尾之前。

Answer 1

问题出在你加载脚本的地方。变化

<html><head>
<title>Drag</title>

<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body id="body">
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
</body>
</html>

到

<html><head>
<title>Drag</title>

<link rel="stylesheet" href="style.css"/>
</head>
<body id="body">
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<div class="draggable-element">Gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>
<script src="script.js"></script>
</body>
</html>

它会起作用。

Answer 2

问题是您的脚本在加载DOM之前尝试获取draggable-element DOM元素。

解决方案：在结束<script src="script.js"></script>标记之前放置</body>以延迟加载脚本，直到元素加载到DOM中。

或者你可以使用

document.addEventListener("DOMContentLoaded", function(event) { 
  //code here
});

在您的script.js中

，在DOM加载后执行脚本。

Javascript无法运行

2 个答案: