I am working on a website that can generate templates with drag and drop. I have made an element generator. But the problem is that I can only drag and drop the elements that are already in the “container” as an example ” already button” but the generated items are not droppable. I’m new to JavaScript so don’t know much about it. Please solve this problem. So I may continue to work on my website Here is my code
JavaScript
x
152
152
1
<html lang="en">2
3
<head>4
<meta charset="UTF-8">5
<meta http-equiv="X-UA-Compatible" content="IE=edge">6
<meta name="viewport" content="width=device-width, initial-scale=1.0">7
<title>Document</title>8
</head>9
<style>10
body {11
margin: 0;12
}13
14
.container {15
background-color: #333;16
padding: 1rem;17
margin-top: 1rem;18
}19
20
.draggable {21
padding: 1rem;22
background-color: white;23
border: 1px solid black;24
cursor: move;25
}26
27
.draggable.dragging {28
opacity: .5;29
}30
/* Background Styles Only */31
32
@import url('https://fonts.googleapis.com/css?family=Raleway');33
* {34
font-family: Raleway;35
}36
37
.side-links {38
position: absolute;39
top: 15px;40
right: 15px;41
}42
43
.side-link {44
display: flex;45
align-items: center;46
justify-content: center;47
text-decoration: none;48
margin-bottom: 10px;49
color: white;50
width: 180px;51
padding: 10px 0;52
border-radius: 10px;53
}54
55
.side-link-youtube {56
background-color: red;57
}58
59
.side-link-twitter {60
background-color: #1DA1F2;61
}62
63
.side-link-github {64
background-color: #6e5494;65
}66
67
.side-link-text {68
margin-left: 10px;69
font-size: 18px;70
}71
72
.side-link-icon {73
color: white;74
font-size: 30px;75
}76
</style>77
78
<body>79
<textarea id="ambtnhtml" name="generatedCode1" class="generatedCode1"> <button type="button" class="draggable" id="" draggable ="true"> Button</button></textarea>80
81
<!-- area -->82
<button type="button" id="generatehtml">generate button </button>83
<div class="container pipp" style="margin: auto;">84
85
<button type="button" class="draggable AM-btnhj" id="" draggable="true">Already Button</button>86
87
88
</div>89
<div class="container">90
91
</div>92
</body>93
<!-- drag and drop able script -->94
<script>95
const draggables = document.querySelectorAll('.draggable')96
const containers = document.querySelectorAll('.container')97
98
draggables.forEach(draggable => {99
draggable.addEventListener('dragstart', () => {100
draggable.classList.add('dragging')101
})102
103
draggable.addEventListener('dragend', () => {104
draggable.classList.remove('dragging')105
})106
})107
108
containers.forEach(container => {109
container.addEventListener('dragover', e => {110
e.preventDefault()111
const afterElement = getDragAfterElement(container, e.clientY)112
const draggable = document.querySelector('.dragging')113
if (afterElement == null) {114
container.appendChild(draggable)115
} else {116
container.insertBefore(draggable, afterElement)117
}118
})119
})120
121
function getDragAfterElement(container, y) {122
const draggableElements = [container.querySelectorAll('.draggable:not(.dragging)')]123
124
return draggableElements.reduce((closest, child) => {125
const box = child.getBoundingClientRect()126
const offset = y - box.top - box.height / 2127
if (offset < 0 && offset > closest.offset) {128
return {129
offset: offset,130
element: child131
}132
} else {133
return closest134
}135
}, {136
offset: Number.NEGATIVE_INFINITY137
}).element138
}139
</script>140
<!-- add new button -->141
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>142
<script>143
$(document).ready(function() {144
$("#generatehtml").click(function() {145
$(".pipp").append($("#ambtnhtml").val());146
$("ambtnhtml").val("");147
});148
149
});150
</script>151
152
</html>Please Help
Advertisement
Answer
You missed adding event handlers to the new elements. I modified your example by adding event handlers to a separate function initDraggable so that later it would be easier to use it when generating new elements.
JavaScript
1
156
156
1
<html lang="en">2
3
<head>4
<meta charset="UTF-8">5
<meta http-equiv="X-UA-Compatible" content="IE=edge">6
<meta name="viewport" content="width=device-width, initial-scale=1.0">7
<title>Document</title>8
</head>9
<style>10
body {11
margin: 0;12
}13
14
.container {15
background-color: #333;16
padding: 1rem;17
margin-top: 1rem;18
}19
20
.draggable {21
padding: 1rem;22
background-color: white;23
border: 1px solid black;24
cursor: move;25
}26
27
.draggable.dragging {28
opacity: .5;29
}30
/* Background Styles Only */31
32
@import url('https://fonts.googleapis.com/css?family=Raleway');33
* {34
font-family: Raleway;35
}36
37
.side-links {38
position: absolute;39
top: 15px;40
right: 15px;41
}42
43
.side-link {44
display: flex;45
align-items: center;46
justify-content: center;47
text-decoration: none;48
margin-bottom: 10px;49
color: white;50
width: 180px;51
padding: 10px 0;52
border-radius: 10px;53
}54
55
.side-link-youtube {56
background-color: red;57
}58
59
.side-link-twitter {60
background-color: #1DA1F2;61
}62
63
.side-link-github {64
background-color: #6e5494;65
}66
67
.side-link-text {68
margin-left: 10px;69
font-size: 18px;70
}71
72
.side-link-icon {73
color: white;74
font-size: 30px;75
}76
</style>77
78
<body>79
<textarea id="ambtnhtml" name="generatedCode1" class="generatedCode1"> <button type="button" class="draggable" id="" draggable ="true"> Button</button></textarea>80
81
<!-- area -->82
<button type="button" id="generatehtml">generate button </button>83
<div class="container pipp" style="margin: auto;">84
85
<button type="button" class="draggable AM-btnhj" id="" draggable="true">Already Button</button>86
87
88
</div>89
<div class="container">90
91
</div>92
</body>93
<!-- drag and drop able script -->94
<script>95
const draggables = document.querySelectorAll('.draggable')96
const containers = document.querySelectorAll('.container')97
98
function initDraggable (draggable) {99
draggable.addEventListener('dragstart', () => {100
draggable.classList.add('dragging')101
})102
103
draggable.addEventListener('dragend', () => {104
draggable.classList.remove('dragging')105
})106
}107
108
draggables.forEach(initDraggable)109
110
containers.forEach(container => {111
container.addEventListener('dragover', e => {112
e.preventDefault()113
const afterElement = getDragAfterElement(container, e.clientY)114
const draggable = document.querySelector('.dragging')115
if (afterElement == null) {116
container.appendChild(draggable)117
} else {118
container.insertBefore(draggable, afterElement)119
}120
})121
})122
123
function getDragAfterElement(container, y) {124
const draggableElements = [container.querySelectorAll('.draggable:not(.dragging)')]125
126
return draggableElements.reduce((closest, child) => {127
const box = child.getBoundingClientRect()128
const offset = y - box.top - box.height / 2129
if (offset < 0 && offset > closest.offset) {130
return {131
offset: offset,132
element: child133
}134
} else {135
return closest136
}137
}, {138
offset: Number.NEGATIVE_INFINITY139
}).element140
}141
</script>142
<!-- add new button -->143
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>144
<script>145
$(document).ready(function() {146
$("#generatehtml").click(function() {147
const newDraggable = $($("#ambtnhtml").val())148
initDraggable(newDraggable.get(0))149
$(".pipp").append(newDraggable);150
$("ambtnhtml").val("");151
});152
153
});154
</script>155
156
</html>