Делаем элемент перетаскиваемым без идентификатора
Я пытаюсь сделать так, чтобы элементы div, созданные с помощью .createElement, можно было перетаскивать. Он отлично работает с уже созданными элементами div, как показано ниже:
<div>
This can be dragged around, but outputs cannot?!
</div>
но когда я создаю новые элементы div с помощью функции addElement(), это не работает.
Более подробно вот что делает мой код: пользовательский ввод текста -> нажимает кнопку ввода, и пользовательский ввод (ы) выводятся на экран, и их можно перетаскивать.
Полный код:
function addElement () {
var text = document.getElementById("input").value;
// create a new div element
var newDiv = document.createElement("div");
// and give it some content
var newContent = document.createTextNode(text);
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
document.getElementById("input").value = " ";
}
$( function() {
var div = document.getElementsByTagName('div');
$( div ).draggable();
} ); div { width: 150px; height: 150px; padding: 0.5em; }<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<title>repl.it</title>
<link href = "style.css" rel = "stylesheet" type = "text/css" />
<link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel = "stylesheet" href = "/resources/demos/style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input id = "input"type = "text" placeholder = " text">
<button onclick = "addElement()" >Input</button>
<p>Outputs:</p>
<script src = "script.js"></script>
</body>
</html>
<div>
This can be dragged around, but outputs cannot?!
</div>
</body>
</html>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Когда вы загружаете страницу, перетаскиваемый элемент прикрепляется к уже загруженному элементу div. Но когда вы динамически создаете новый элемент, перетаскиваемый элемент не прикрепляется к новому div. Всякий раз, когда вы добавляете новый div, вам нужно повторно прикрепить к нему перетаскиваемое событие.
Вы только бежите
$( function() {
var div = document.getElementsByTagName('div');
$( div ).draggable();
} );
когда ваше приложение загружается в первый раз, поэтому вновь созданные div нельзя перетаскивать.
Если вы хотите, чтобы новые div можно было перетаскивать, вам нужно добавить $( newDiv ).draggable() к вашей функции addElement().
Когда вы загружаете страницу, перетаскиваемый элемент прикрепляется к уже загруженному элементу div. Но когда вы динамически создаете новый элемент, перетаскиваемый элемент не прикрепляется к новому div. Итак, всякий раз, когда вы добавляете новый div, вам нужно повторно прикрепить к нему событие draggable:
function addElement() {
var text = document.getElementById("input").value;
// create a new div element
var newDiv = document.createElement("div");
// and give it some content
var newContent = document.createTextNode(text);
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
$(function() {
var div = document.getElementsByTagName('div');
$(div).draggable();
});
document.getElementById("input").value = " ";
}
$(function() {
var div = document.getElementsByTagName('div');
$(div).draggable();
});div {
width: 150px;
height: 150px;
padding: 0.5em;
}<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<title>repl.it</title>
<link href = "style.css" rel = "stylesheet" type = "text/css" />
<link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel = "stylesheet" href = "/resources/demos/style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input id = "input" type = "text" placeholder = " text">
<button onclick = "addElement()">Input</button>
<p>Outputs:</p>
<script src = "script.js"></script>
</body>
</html>
<div>
This can be dragged around, but outputs cannot?!
</div>
</body>
</html>Вы используете $(обратный вызов), который вызывает функцию только один раз при загрузке DOM.
Однако когда вы добавляете новые элементы, их нельзя будет перетаскивать, так как функция, которая это делает, уже запущена.
Чтобы новые элементы также можно было перетаскивать, вам также нужно вызвать jQuery.draggable() после их создания.
Это означает, что вы должны добавить newDiv.draggable() внутри своей функции, которая создает элементы.
Примечание
При использовании API, такого как jQuery, вы должны стараться придерживаться его, а не нативных методов, чтобы упростить его понимание, поскольку вам не придется постоянно размышлять.
Подзаметки
- У вас неправильный HTML, так как у вас есть
<div>после закрытия<body>и<html>, и вы пытаетесь закрыть их снова в конце. Поскольку HTML запрещает элементы за пределами<body>, большинство браузеров автоматически исправляют эту ошибку. Тем не менее, вы должны сами правильно форматировать HTML. - Создание jQuery-элементов с использованием $(document.createElement('div')) вместо использования $('<div>') (минимально) быстрее, поэтому я использую его ниже
- Не добавляйте
onclick-слушатель в HTML, вместо этого добавьте его с помощью JavaScript. Добавление встроенного слушателя потребовало бы, чтобы функция была представлена в глобальной области видимости, и загрязнило бы глобальное пространство имен. Слушателям не нужно называться, и их можно легко добавить в JS, что позволяет не подвергать функции глобальной области видимости.
Если ваш код будет использовать в основном jQuery, он будет выглядеть так:
$(function() { // Executed once DOM loaded
// Make all pre-existing 'div's draggable
$('div').draggable();
// Add the 'onclick'-listener using jQuery
$('button').click(function() {
// Creating jQuery-element this way; read about the reason in the sub-notes
var newDiv = $(document.createElement("div"));
newDiv.text($('#input').val()); // Set the text to the value of 'input'
newDiv.draggable(); // Make it draggable
$('body').append(newDiv); // Append it to the body
$('#input').val(''); // Set 'input's value to ""
});
});div {
width: 150px;
height: 150px;
padding: 0.5em;
}<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input id = "input" type = "text" placeholder = "text">
<button>Input</button>
<p>Outputs:</p>
<div>
This can be dragged around, but outputs cannot?!
</div>
</body>
</html>