I'm doing something like GMAIL in JS ES5, I'm just using const and let, that's it.
The purpose: User click on the red rectangle and can move it to any list. When the user has overmouse the heading3, the heading3 changes bg color and the mouse will change to pointer.
When the user mouseup while on the h3 tag, the list will append to that list. Note, if the li's are selected, than move all of them. If none is selected, but you drag it from rectangle, then only that one is going to move, and it doesn't have to be selected.
I'm not quite sure how to implement this. I have some idea, but not sure how to start. Not sure how the drag and drop even works.
I need to get the event, right? If this mouse is targeted on the h3, change the cursor from (/) to a pointer, dynamically. Drop append to the list.
Well, here is the code in codepen: https://codepen.io/Aurelian/pen/dJryrX?editors=1010
The JS:
window.onload = function() {
//////////////////////////////////
// VARIABLES
//////////////////////////////////
// Form
const form = document.querySelector('#registrar');
const input = form.querySelector('input');
// Lists
const partyLists = document.querySelectorAll('.party-lists');
const partyInvitedList = document.querySelector('#list-invited')
const partyGoingList = document.querySelector('#list-going');
const partyNotSure = document.querySelector('#list-not-sure');
const partyNotGoing = document.querySelector('#list-not-going');
// List Options
const listOptions = document.querySelector('.list-options');
const btnMoveToGoing = document.querySelector('.btnMoveGoing');
const btnMoveToNotSure = document.querySelector('.btnMoveNotSure');
const btnMoveToNotGoing = document.querySelector('.btnMoveNotGoing');
const btnDeleteSelected = document.querySelector('.btnDeleteSelected');
//////////////////////////////////
// FUNCTIONS
//////////////////////////////////
// Grab the LI (show a tooltip - moving convo);
// When the mouse with the convo is over one of the headings, make the bg yellow
// On mouse up on the heading, append the selected list there or a list that was dragged by square not selected
function dragAndDrop(e) {
var mouseDown = document.onmousedown = OnMouseDown;
var mouseUp = document.onmouseup = OnMouseUp;
// On mouse down, get this element, or selected elements
// If the element hovers over the h3, change cursor and bg color
// Mouse Up on h3, append the child to the list
}
function createLI(text) {
const li = document.createElement('li');
const move = document.createElement('div');
move.setAttribute('class', 'move');
li.appendChild(move);
const span = document.createElement('span');
span.textContent = text;
li.appendChild(span);
const label = document.createElement('label');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
label.appendChild(checkbox);
li.appendChild(label);
const editButton = document.createElement('button');
editButton.textContent = 'edit';
li.appendChild(editButton);
const removeButton = document.createElement('button');
removeButton.textContent = 'remove';
li.setAttribute('draggable','true');
li.appendChild(removeButton);
return li;
}
//////////////////////////////////
// EVENT HANDLERS
//////////////////////////////////
form.addEventListener('submit', function(e) {
e.preventDefault();
const text = input.value;
input.value = '';
const li = createLI(text);
partyInvitedList.appendChild(li);
});
for (var i = 0; i < partyLists.length; i++) {
partyLists[i].addEventListener('click', function(e) {
if (e.target.tagName === 'BUTTON') {
const button = e.target;
const li = button.parentNode;
const ul = li.parentNode;
if (button.textContent === 'remove') {
ul.removeChild(li);
} else if (button.textContent === 'edit') {
const span = li.children[1];
const input = document.createElement('input');
input.type = 'text';
input.value = span.textContent;
li.insertBefore(input, span);
li.removeChild(span);
button.textContent = 'save';
} else if (button.textContent === 'save') {
const input = li.children[1];
const span = document.createElement('span');
span.textContent = input.value;
li.insertBefore(span, input);
li.removeChild(input);
button.textContent = 'edit';
}
}
});
}
listOptions.addEventListener('click', function(e) {
for (var i = 0; i < partyLists.length; i++) {
partyLists[i].querySelectorAll('*:checked').forEach(function (listItems) {
const button = e.target;
var items = listItems.parentNode.parentNode;
if(button.className === 'btnMoveGoing') {
partyGoingList.appendChild(items);
items.checked = false;
var item = listItems;
item.checked = false;
} else if(button.className === 'btnMoveNotSure'){
partyNotSure.appendChild(items);
var item = listItems;
item.checked = false;
} else if(button.className === 'btnMoveNotGoing'){
partyNotGoing.appendChild(items);
var item = listItems;
item.checked = false;
} else if(button.className === 'btnDeleteSelected'){
listItems.parentNode.parentNode.remove();
var item = listItems;
item.checked = false;
}
});
}
});
}
The HTML:
<div class="top">
<form id="registrar">
<input type="text" name="name" placeholder="Invite Someone">
<button type="submit" name="submit" value="submit">Submit</button>
</form>
<div class="list-options">
<button class="btnMoveGoing">Move to Going</button>
<button class="btnMoveNotSure">Move to Not Sure</button>
<button class="btnMoveNotGoing">Move to Not Going</button>
<button class="btnDeleteSelected">Delete Selected</button>
</div>
</div><!-- /top -->
<div class="col">
<h3>Invited</h3>
<ul id="list-invited" class="party-lists">
</ul>
</div>
<div class="col">
<h3>Going</h3>
<ul id="list-going" class="party-lists">
</ul>
</div>
<div class="col">
<h3>Not Sure</h3>
<ul id="list-not-sure" class="party-lists">
</ul>
</div>
<div class="col">
<h3>Not Going</h3>
<ul id="list-not-going" class="party-lists">
</ul>
</div>
CSS:
/*
Have three list
Add Input to main list
Be able to edit, delete from any list
Be able to move the items through the lists
Make some acction if the buttons are checked
// Put this UI in TABS
*/
h3 {
background: grey;
margin: 0 10px;
padding: 10px;
color: white;
}
.move {
height: 30px;
width: 10px;
background-color: red;
display: inline-block;
cursor: move;
}
.col {
width: 25%;
float: left;
}
.party-list {
}
