Перемещение кнопок на странице с помощью JavaScript

Моя кнопка может перемещаться, но странно, я не могу понять, что-то не так со смещением.Перемещение кнопок на странице с помощью JavaScript

Я хочу, чтобы мои кнопки перемещались курсором мыши, но теперь он движется не так, как я хочу, а иногда и исчезает.

Кроме того, новые созданные кнопки перекрывают друг друга, я не знаю, как это решить, и лучше выглядите.

var coorA; 
 
var coorB; 
 
var btn = null; 
 

 
function mousedown() { 
 
    if (event.target.tagName === "BUTTON") { 
 
     btn = event.target; 
 
     coorA = btn.offsetTop; 
 
     coorB = btn.offsetLeft; 
 
    } 
 
} 
 

 
function mouseup() { 
 
    btn = null; 
 
} 
 

 
function mousemove() { 
 
    if (btn !== null) { 
 
     btn.style.top = (event.clientY - coorA) + "px"; 
 
     btn.style.left = (event.clientX - coorB) + "px"; 
 
    } 
 
} 
 

 
function createButton() { 
 
    var button = document.createElement("BUTTON"); 
 
    var msg = document.getElementById("word").value; 
 
    if (msg.length > 0) { 
 
     var t = document.createTextNode(msg); 
 
     button.appendChild(t); 
 
     document.body.appendChild(button); 
 
    } 
 
    document.getElementById("word").value = ""; 
 
} 
 
document.getElementsByTagName("body")[0].addEventListener("mousedown", mousedown); 
 
document.getElementsByTagName("body")[0].addEventListener("mousemove", mousemove); 
 
document.getElementsByTagName("body")[0].addEventListener("mouseup", mouseup);

body { 
 
    background-color: black; 
 
} 
 
#word { 
 
    padding: 10px 30px; 
 
    font-size: 14px; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    background-color: #e7e7e7; 
 
    color: #000; 
 
    font-weight: 700; 
 
    padding: 10px 30px; 
 
    font-size: 14px; 
 
    border: 1px solid gray; 
 
} 
 

 
#add { 
 
    position: relative; 
 
    background-color: #e7e7e7; 
 
    color: #000; 
 
    font-weight: 700; 
 
    padding: 10px 30px; 
 
    font-size: 14px; 
 
}

<!DOCTYPE html> 
 
<!-- 
 
To change this license header, choose License Headers in Project Properties. 
 
To change this template file, choose Tools | Templates 
 
and open the template in the editor. 
 
--> 
 
<html> 
 
    <head> 
 
     <title>Poetry-yuc217</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     
 

 
    </head> 
 
    <body> 
 
     <div> 
 
      <form> 
 
       <input id = "word" type = "text" name = "word"> 
 
       <input id = "add" type = "button" value = "Add Word" onclick = "createButton()"> 
 
       <br> 
 
       
 
      </form> 
 
      <button type="button" >this</button> 
 
       
 

 
     </div> 
 

 

 
     
 
    
 

 
enter code here 
 
    </body> 
 
</html>

источник

2016-03-24 RhumB

Ответ на ваш вопрос в комментариях:

спасибо! Я все еще немного смущен, о чем «событие» на самом деле относится . Из того, что я узнал, событие - это все действия на странице. И это не так ясно ...

В своем коде вы ссылаетесь на event объекте, но не прошли его в качестве аргумента. Я полагаю, что это может привести к путанице. Ну, я сам был любопытным, и о, мальчик, вниз по кроличьей дыре, куда я пошел ...

Я постараюсь быть таким же простым & вообще как могу, поскольку я сам еще полностью обернул мое понимание этого.

ОК, поэтому в браузере существуют различные типы событий. Вероятно, вы знаете некоторые из стандартных, такие как «щелчок», «загрузка», «keydown» и т. Д. Если вы хотите, чтобы ваш код что-то делал, когда происходит такое событие, вы выбираете элемент DOM, такой как <button>, <div> и т. Д. (вообще говоря, потому что есть также не DOM события, связанные, вы можете прочитать все об этом здесь https://developer.mozilla.org/en-US/docs/Web/Events). вы затем прикрепить этот элемент в функцию, которая будет вызываться, когда указанное событие.

есть различные способы присоединения такой функции (которую BTW также называют обработчиком события или прослушиватель событий). При подключении обработчика событий что-то называется EventListener int erface. Функция, которая была вызвана через событие, получит аргумент, объект Event, любезно предоставленный интерфейсом (https://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#glossary-event-handler).

НО НО !!! Если вы присоедините событие, используя встроенный метод i.e <a onclick="myFunc();" />, ваша функция получит аргумент (event), только если внутри функции записано «событие», то есть <a onclick="myFunc(event);" />.

Вы можете наблюдать это странное поведение и различные типы событий, крепящие в этом JSFiddle:

https://jsfiddle.net/duwed8kg/

Я не уверен, почему это происходит, но это чертовски хорошая тема для нового вопроса.

PS, Что касается вашего кода и основного вопроса (для которого я предоставил код, без объяснения причин) - Это проблематично по-разному (привязка к встроенному событию, выбор элементов с помощью имен тегов для ex), I сосредоточившись на решении вашей проблемы с минимальными изменениями в вашем коде/стиле, но, пожалуйста, имейте это в виду.

var coorA; 
 
var coorB; 
 
var btn = null; 
 
var lastMouseX; 
 
var lastMouseY; 
 

 
function mousedown() { 
 
    if (event.target.className.indexOf("listButton") > -1) { 
 
     btn = event.target; 
 
     if(btn.style.top === "" || btn.style.left === "") { 
 
      btn.style.position = "absolute"; 
 
      btn.style.top = btn.offsetTop + "px"; 
 
      btn.style.left = btn.offsetLeft + "px"; 
 
     } 
 
     coorA = btn.offsetTop; 
 
     coorB = btn.offsetLeft; 
 
    } 
 
} 
 

 
function mouseup() { 
 
    btn = null; 
 
} 
 

 
function mousemove() { 
 
    if (btn !== null) { 
 
     btn.style.top = parseInt(btn.style.top) + (event.clientY - lastMouseY) + "px"; 
 
     btn.style.left = parseInt(btn.style.left) + (event.clientX - lastMouseX) + "px"; 
 
    } 
 
    lastMouseX = event.clientX; 
 
    lastMouseY = event.clientY; 
 
} 
 

 
function createButton() { 
 
    var button = document.createElement("BUTTON"); 
 
    var msg = document.getElementById("word").value; 
 
    if (msg.length > 0) { 
 
     var t = document.createTextNode(msg); 
 
     button.appendChild(t); 
 
     button.classList.add("listButton"); 
 
     document.getElementsByClassName("container")[0].appendChild(button); 
 
    } 
 
    document.getElementById("word").value = ""; 
 
} 
 
document.getElementsByTagName("body")[0].addEventListener("mousedown", mousedown); 
 
document.getElementsByTagName("body")[0].addEventListener("mousemove", mousemove); 
 
document.getElementsByTagName("body")[0].addEventListener("mouseup", mouseup); 
 
document.getElementById("add").addEventListener("click", createButton);

body { 
 
    background-color: black; 
 
} 
 

 
.container { 
 
    position:relative; 
 
    height:1000px; 
 
} 
 

 
#word { 
 
    padding: 10px 30px; 
 
    font-size: 14px; 
 
} 
 

 
button { 
 
    background-color: #e7e7e7; 
 
    color: #000; 
 
    font-weight: 700; 
 
    padding: 10px 30px; 
 
    font-size: 14px; 
 
    border: 1px solid gray; 
 
} 
 

 
.listButton { 
 
    margin-right: 5px; 
 
    margin-top: 5px; 
 
    float: left; 
 
} 
 
#add { 
 
    position: relative; 
 
    background-color: #e7e7e7; 
 
    color: #000; 
 
    font-weight: 700; 
 
    padding: 10px 30px; 
 
    font-size: 14px; 
 
}

<!DOCTYPE html> 
 
<!-- 
 
To change this license header, choose License Headers in Project Properties. 
 
To change this template file, choose Tools | Templates 
 
and open the template in the editor. 
 
--> 
 
<html> 
 
    <head> 
 
     <title>Poetry-yuc217</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     
 

 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
      <form> 
 
       <input id = "word" type = "text" name = "word"> 
 
       <input id = "add" type = "button" value = "Add Word"> 
 
       <br> 
 
       
 
      </form> 
 
      <button type="button" class="listButton">this</button> 
 
       
 

 
     </div> 
 

 

 
     
 
    
 

 
enter code here 
 
    </body> 
 
</html>

источник

2016-03-24 23:56:05

Большое спасибо! Я все еще немного смущен тем, что на самом деле означает «событие». Из того, что я узнал, событие - это все действия на странице. И это не так понятно ... – RhumB

Добро пожаловать! Я пытался ответить вам, но был ограничен персонажами, поэтому я отредактировал его в главном ответе выше. –

Чтобы исправить чрезмерные колена создать маркированный список, а затем добавить <li><button type="button" >fieldValue</button></li> к маркированному списку.

<ul id="buttonList"> 
    <li><button type="button" >this</button></li> 
    <li><button type="button" >that</button></li> 
    <li><button type="button" >the other</button></li> 
</ul>

Что касается движущейся кнопки я не был в состоянии повторить, что они имели некоторое отставание, но они шли хорошо для меня, может быть, если вам нужна дополнительная помощь, вы можете подготовить демо с помощью jsfiddle.

источник

2016-03-24 21:38:59 Blindsyde

Спасибо за ваше предложение! Но после того, как я изменил его на список, кнопки все еще находятся друг на друге. но не полностью перекрывается. – RhumB

используйте css, чтобы создать список, добавьте отступы и т. Д., Вы также можете удалить черный диск, хотя вы не можете видеть их с цветом фона. – Blindsyde

Перемещение кнопок на странице с помощью JavaScript

ответ

Смежные вопросы