I try to use div as input in my specific project.
User are able to drag items.
The problem is on Firefox, can't edit "test".
For testing, wait 3 seconds please.
The script:
$(document).ready(function() {
$(".form_bal_textfield").draggable({
helper: function() {
return getTextFieldHTML();
},
connectToSortable: ".form_builder_area"
});
$(".form_builder_area").sortable({
cursor: 'move',
placeholder: 'placeholder',
start: function(e, ui) {
ui.placeholder.height(ui.helper.outerHeight());
},
stop: function(ev, ui) {
}
});
$(".form_builder_area").disableSelection();
});
function inputChange(objInput) {
objInput.setAttribute('value', objInput.value);
}#label_mkxztyxf {
border: 1px solid #DFE3E7;
padding: .47rem .8rem;
}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://filebin.net/z6dqw9j0nlzssg41/draggable.css">
<br/>
<div id="lblSource" class="form_builder_area ui-sortable">
<div id="label_mkxztyxf" onchange="inputChange(this);">
<div class="fr-wrapper" dir="rtl">
<div contenteditable="true">test</div>
</div>
<script src="https://filebin.net/z6dqw9j0nlzssg41/jquery-ui.js"></script>