移动js脚本到外部文件

Move js script to external file

本文关键字：外部 文件 脚本 js 移动      更新时间：2023-09-26

当点击移动按钮时，我在div中有以下代码来移动div:

    <input id="move1" class="smallButtonidle" type="button" value="M" style="top: 0px; left: 0px; float: left;"  />
<script type="text/javascript">
var isDown1 = false;
document.getElementById('move1').addEventListener('mousedown', function(e1)
 {
    isDown1 = true;
    offset = [document.getElementById('jsmolwindow1').offsetLeft - e1.clientX,
        document.getElementById('jsmolwindow1').offsetTop - e1.clientY];
}, true);
window.addEventListener('mouseup', function() {
    isDown1 = false;
}, true);
window.addEventListener('mousemove', function(event) {
    if (isDown1) {
       mousePosition = {
          x : event.clientX,
         y : event.clientY
   };
        document.getElementById('jsmolwindow1').style.left = (mousePosition.x + offset[0]) + 'px';
        document.getElementById('jsmolwindow1').style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);
</script>

我想把这个js脚本移动到一个外部文件来澄清我的html

我修改我的html代码如下:

 <input id="move1" class="smallButtonidle" type="button" value="M" style="top: 0px; left: 0px; float: left;"  onclick="move1js()"/>

并放入一个include js外部文件:

function move1js()
{
var isDown1 = false;
document.getElementById('move1').addEventListener('mousedown', function(e1)
 {
    isDown1 = true;
    offset = [document.getElementById('jsmolwindow1').offsetLeft - e1.clientX,
        document.getElementById('jsmolwindow1').offsetTop - e1.clientY];
}, true);
window.addEventListener('mouseup', function() {
    isDown1 = false;
}, true);
window.addEventListener('mousemove', function(event) {
    if (isDown1) {
       mousePosition = {
          x : event.clientX,
         y : event.clientY
   };
        document.getElementById('jsmolwindow1').style.left = (mousePosition.x + offset[0]) + 'px';
        document.getElementById('jsmolwindow1').style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);
}

这样做我的移动按钮停止工作。我不明白为什么。

任何想法?

解决方案的步骤如下:

  1. 创建一个javascript文件(扩展名为.js)。让假设文件是moveDiv.js
  2. 将所有javascript代码原样移动到这个新创建的文件中 <script> &</script>标签。

  3. 在你的HTML文件中引用这个文件

    <script src="moveDiv.js" type="text/javascript"></script>

这应该会再次开始移动按钮。

相关文章：