Как перенести value drag and drop`ом из одного input в другой?
Подскажите, как написать реализацию, на подобие sortable в jquery, чтобы менялся текст внутри инпутов и можно ли такое сделать? Есть код, но, к сожалению, он не работает (использовал его, чтобы переносить абзацы, но с инпутами так же не получается).
Код:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $(".dragElement").draggable({ axis: "y", containment: parent, cursor: "grabbing", opacity: 0.5, snap: true, snapTolerance: 100 }); $("#parent").sortable(); } ); </script> </head> <body> <div id="parent" style="border:1px solid black"> <div class="dragElement" style="border:1px solid black"> <input value="Drag and drop 1"> </div> <div class="dragElement" style="border:1px solid black"> <input value="Drag and drop 2"> </div> <div class="dragElement" style="border:1px solid black"> <input value="Drag and drop 3"> </div> </div> </body> </html> |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $(".dragElement").draggable({ axis: "y", containment: parent, cursor: "grabbing", opacity: 0.5, snap: true, snapTolerance: 100 }); $("#parent").sortable(); } ); </script> </head> <body> <div id="parent" style="border:1px solid black"> <div class="dragElement" style="border:1px solid black"> <input value="Drag and drop 1"> </div> <div class="dragElement" style="border:1px solid black"> <input value="Drag and drop 2"> </div> <div class="dragElement" style="border:1px solid black"> <input value="Drag and drop 3"> </div> </div> </body> </html>
Дополнительно:
Выделить и перенести. Это штатная функция, безо всякого кода.
А так, при драг-н-дропе у Вас есть доступ до элемента, который перетаскивается и доступ к элементу в который происходт дроп. Соответственно, по событию дропа берёте значение одного инпута, второго и... меняете местами.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для переноса значения с помощью Drag and Drop из одного input в другой необходимо использовать JavaScript. Вот пример кода, который позволит вам реализовать данную функциональность:
```html
.dropzone {
width: 200px;
height: 50px;
border: 2px dashed #ccc;
margin: 10px;
padding: 10px;
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.value = data;
}
```
В данном примере мы создали два элемента: исходный input с текстом "Hello, World!" и dropzone div, который является целевым элементом для переноса значения. У исходного input установлен атрибут draggable="true", чтобы он мог быть перетащен.
Функция allowDrop(event) предотвращает действие по умолчанию при перетаскивании элемента над целевым элементом.
Функция drop(event) вызывается при отпускании элемента над целевым элементом. Она получает данные из перетаскиваемого элемента и устанавливает их значение в целевом элементе.
Вы можете настроить стили и функциональность данного примера под свои потребности и использовать его в своем проекте.