I have the following code in a div to move the div when clicking on he move button:
<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>
I would like to move this js script to an external file to clarify my html
I modify my html code the following way :
<input id="move1" class="smallButtonidle" type="button" value="M" style="top: 0px; left: 0px; float: left;" onclick="move1js()"/>
And put in an include js external file:
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);
}
Doing so my move button stop working. I don't understand why.
Any ideas?
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
It helps in the reusability of code in more than one HTML file. It allows easy code readability. It is time-efficient as web browsers cache the external js files, which further reduces the page loading time.
Steps for your solution are:
.js
). Lets
suppose the file is moveDiv.js
<script>
& </script>
tags.Give reference to this file in your HTML file as
<script src="moveDiv.js" type="text/javascript"></script>
This should start moving your button again.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With