I have a problem adding check box in my JavaScript code.
I want to replace the checked and unchecked ones by dragging the elements
I want to add a checkbox to the beginning of the elements and I want to add the added elements to the beginning of the list
I want the selected option to go to the bottom
How can I do it?
body {
margin: 0;
min-width: 250px;
}
* {
box-sizing: border-box;
background-color: #292c30;
color: white;
}
ul {
list-style-type: none;
}
ul li {
width: 51%;
cursor: pointer;
position: relative;
padding: 15px 8px 12px 40px;
list-style-type: none;
font-size: 17px;
font-style: normal;
transition: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li.checked {
border: #292c30 1px;
line-break: auto;
color: rgb(121, 113, 113);
text-decoration: line-through;
font-style: italic;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: rgb(121, 113, 113);
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
.close {
position: absolute;
right: 0;
top: 0;
width: 30%;
padding: 10px;
}
.header {
padding: 25px 60px;
color: rgb(121, 113, 113);
text-align: left;
font-style: normal;
}
.header:after {
content: "";
display: table;
clear: both;
}
input {
margin: 0;
border: rgb(121, 113, 113);
border-radius: 0;
width: 30%;
padding: 10px;
float: left;
font-size: 15px;
font-style: normal;
}
.addBtn {
padding: 10px;
width: 15%;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
</style>
</head>
<body>
<div id="myDIV" class="header">
<h2 style="margin:5px"></h2>
<input type="text" id="myInput" font-style="italic" placeholder="Add new task.." style="border-block-end: solid 1px rgb(121, 113, 113);">
<span onclick="newElement()" class="addBtn">+</span>
</div>
<ul id="myUL">
</ul>
<script>
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
var remove = document.querySelector('.draggable');
function dragStart(e) {
this.style.opacity = '0.4';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
};
function dragEnter(e) {
this.classList.add('over');
}
function dragLeave(e) {
e.stopPropagation();
this.classList.remove('over');
}
function dragOver(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
return false;
}
function dragDrop(e) {
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
function dragEnd(e) {
var listItens = document.querySelectorAll('.draggable');
[].forEach.call(listItens, function(item) {
item.classList.remove('over');
});
this.style.opacity = '1';
}
function addEventsDragAndDrop(el) {
el.addEventListener('dragstart', dragStart, false);
el.addEventListener('dragenter', dragEnter, false);
el.addEventListener('dragover', dragOver, false);
el.addEventListener('dragleave', dragLeave, false);
el.addEventListener('drop', dragDrop, false);
el.addEventListener('dragend', dragEnd, false);
}
var listItens = document.querySelectorAll('.draggable');
[].forEach.call(listItens, function(item) {
addEventsDragAndDrop(item);
});
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("Boş bırakılamaz!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
var attr = document.createAttribute('draggable');
li.className = 'draggable';
attr.value = 'true';
li.setAttributeNode(attr);
addEventsDragAndDrop(li);
}
</script>
Aucun commentaire:
Enregistrer un commentaire