cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
<head>
    <title>List task</title>
    <script type="text/javascript" src="list-task.js"></script>
    <link rel="stylesheet" type="text/css" href="list-task.css">
    <script>
      document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
      ':35729/livereload.js?snipver=1"></' + 'script>')
    </script>
</head>
<body>
    <div id="container">
        <div id="list-1">
            <div id="add-item-div">
                <input type="text" name="add-item-text" onkeypress="onEnterInInput(event);">
                <button id="add-item" onclick="add_item(event)">Add Item</button>
            </div>
            <div id="item-list">
            </div>
        </div>
        <div id="list-2">
            <div id="add-item-div-2">
                <input type="text" name="add-item-text-2" onkeypress="onEnterInInput(event);">
                <button id="add-item-2" onclick="add_item_2(event)">Add Item</button>
            </div>
            <div id="item-list-2">
            </div>
        </div>
        <div id="item-template-container" class="item-template-container" draggable="true" ondragstart="listItemDragStartHandler(event);" ondragover="dragoverHandler(event);" ondragend="dragEndHandler(event);" ondragleave="dragLeaveHandler(event);">
            <div class="item-list-element">
                <div class="item-text"></div>
                <div class="delete-item-div">
                    <button class="delete-item" onclick="delete_item(event);">Delete</button>
                </div>
            </div>
        </div>
        <div id="empty-node">&nbsp;</div>
    </div>
</body>
</html>

            
          
!
            
              body {
    font-size: 18px;
}

input {
    font-size: 18px;
}

button {
    /*font-size: 14px;*/
    margin: 2px;
}

#container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#item-template-container {
    display: none
}

#list-1 {
    display: inline-block;
}

#list-2 {
    display: inline-block;
    vertical-align: top;
}

#add-item-div, #add-item-div-2 {
    background-color: orange;
    margin-bottom: 5px;
    width: 18em;
    text-align: center;
}

#add-item, #add-item-2 {
    margin: 10px;
}

#item-list, #item-list-2 {
    display: block;
    width: 13em;
}

.item-list-element {
    background-color: lightgreen;
    margin: 5px;
    text-align: center;
}

.item-list-element:hover {
    cursor: pointer;
}

.item-list-element .item-text {
    display: inline-block;
    width: 8em;
    overflow-wrap: break-word;
}
.item-list-element .delete-item-div {
    display: inline-block;
    float: right;
}

#grayed-empty-node {
    background-color: gray;
    width: 13em;
    opacity: 0;
}

#grayed-empty-node.fade-in {
    -webkit-animation: fade 0.9s;
    animation: fade 0.9s;
    opacity: 1;
}

@-webkit-keyframes fade {
    from {opacity: 0}
    to {opacity: 1}
}@keyframes fade {
    from {opacity: 0}
    to {opacity: 1}
}

#empty-node {
    display: none;
}

            
          
!
            
              'use strict';

var source = null;
var heightWidth = null;
var lastDragOverElementId = null;
var dragImageSource = null;

function removePlaceholder() {
    if(document.getElementById('grayed-empty-node') !== null) {
        document.getElementById('grayed-empty-node').remove();
    }
}

function insertPlaceholder(currentElement, which) {
    var isGrayEmptyNodeThere = document.getElementById('grayed-empty-node');
    if(isGrayEmptyNodeThere === null) {
        var listContainer = currentElement.parentNode;
        var emptyNode = document.getElementById('empty-node').cloneNode(true);
        emptyNode.removeAttribute('id');
        emptyNode.setAttribute('id', 'grayed-empty-node');
        emptyNode.setAttribute('class', 'fade-in');
        emptyNode.style.height = String(heightWidth[0]) + 'px';
        emptyNode.style.width = String(heightWidth[1]) + 'px';
        if (which == 'over')
            listContainer.insertBefore(emptyNode, currentElement);
        else if (which == 'leave')
            listContainer.insertBefore(emptyNode, null);
    }
}

function listItemDragStartHandler(event) {
    source = event.currentTarget;
    heightWidth = [];
    heightWidth.push(source.offsetHeight);
    heightWidth.push(source.offsetWidth);
    event.dataTransfer.setData('text/html', event.currentTarget.innerHTML);
    event.dataTransfer.effectAllowed = 'move';
    // Drag image logic
    dragImageSource = source.cloneNode(true);
    dragImageSource.style.position = 'absolute';
    // Don't show the element
    dragImageSource.style.top = '0px';
    dragImageSource.style.left = '-' + String(window.innerWidth) + 'px';
    // dragImageSource.style.left = '-100px';
    var toTiltElement = dragImageSource.getElementsByClassName('item-list-element')[0];
    toTiltElement.style.transform = 'rotate(5deg)';
    document.body.append(dragImageSource);
    event.dataTransfer.setDragImage(dragImageSource, heightWidth[1]/2, heightWidth[0]/2);
}

function dragoverHandler(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
    source.style.display = 'none';
    var currentElement = event.currentTarget;
    var listContainer = currentElement.parentNode;
    if (lastDragOverElementId != currentElement.getAttribute('id')) {
        lastDragOverElementId = currentElement.getAttribute('id');
        removePlaceholder();
        insertPlaceholder(currentElement, 'over');
    }
}

function dragLeaveHandler(event) {
    event.preventDefault();
    var currentElement = event.currentTarget;
    var listContainer = currentElement.parentNode;
    var elementList = listContainer.getElementsByClassName('item-template-container');
    var visibleElementList = [];
    var i = 0;
    for (i=0; i<elementList.length; i++) {
        if (elementList[i].style.display !== 'none') {
            visibleElementList.push(elementList[i]);
        }
    }
    // Last element ondragleave handler should be delayed, otherwise it
    // would spin off chain reaction.
    var lastVisibleElement = visibleElementList[visibleElementList.length - 1];
    // Basically last element
    if (currentElement.id === lastVisibleElement.getAttribute('id')) {
        lastVisibleElement.removeAttribute('ondragleave');
        removePlaceholder();
        insertPlaceholder(currentElement, 'leave');
        // This delayed the chain reaction
        setTimeout(function() {
            visibleElementList[visibleElementList.length - 1].setAttribute('ondragleave', 'dragLeaveHandler(event);');
        }, 500);
    // When event is on last element set the lastDragOverElementId to null
    // then dragover to lastVisibleElement(second last element) can be handled
    // otherwise dragover to second last element won't show placeholder.
    lastDragOverElementId = null;
    }
}

function dragEndHandler(event) {
    event.preventDefault();
    // Check the dropEffect
    dragImageSource.remove();
    var listElement = document.getElementById('grayed-empty-node')
    var listContainer = listElement.parentNode;
    if (event.dataTransfer.dropEffect === 'none' ||
        event.dataTransfer.dropEffect === 'move') {
        var grayEmptyNode = document.getElementById('grayed-empty-node');
        // When grayEmptyNode is null, that will append at the end.
        listContainer.insertBefore(source, grayEmptyNode);
        source.style.display = '';
        removePlaceholder();
    }
}

function delete_item(event) {
    var currentElement = event.currentTarget;
    var grandParentOfDelete = currentElement.parentNode.parentNode;
    grandParentOfDelete.remove();
}

function add_item() {
    var item_text_node = document.getElementsByName('add-item-text')[0]
    var item_text = item_text_node.value;
    if (item_text.length > 0) {
        var item_template = document.getElementById('item-template-container');
        var item_clone = item_template.cloneNode(true);
        item_clone.removeAttribute('id');
        var random_id = (new Date().getTime() +
            parseInt(Math.random(0, 1000) * 1000))
        item_clone.setAttribute('id', random_id);
        var clone_text = item_clone.getElementsByClassName('item-text')[0];
        clone_text.textContent = item_text;
        // reset the value
        item_text_node.value = '';
        var item_list = document.getElementById('item-list');
        item_list.appendChild(item_clone);
    } else {
        alert('No text?? Add some text!');
    }
}

function add_item_2() {
    var item_text_node = document.getElementsByName('add-item-text-2')[0]
    var item_text = item_text_node.value;
    if (item_text.length > 0) {
        var item_template = document.getElementById('item-template-container');
        var item_clone = item_template.cloneNode(true);
        item_clone.removeAttribute('id');
        var random_id = (new Date().getTime() +
            parseInt(Math.random(0, 1000) * 1000))
        item_clone.setAttribute('id', random_id);
        var clone_text = item_clone.getElementsByClassName('item-text')[0];
        clone_text.textContent = item_text;
        // reset the value
        item_text_node.value = '';
        var item_list = document.getElementById('item-list-2');
        item_list.appendChild(item_clone);
    } else {
        alert('No text?? Add some text!');
    }
}

function onEnterInInput() {
    var e = e || window.event;
    if (e.keyCode == 13) {
        add_item()
    }
}

function sample_data() {
    for(var i=0;i<10;i++){
        var item_text_node = document.getElementsByName('add-item-text')[0]
        item_text_node.value = i;
        var item_text_node_2 = document.getElementsByName('add-item-text-2')[0]
        item_text_node_2.value = i;
        add_item();
        add_item_2();
    }
}

window.onload = function () {
    sample_data();
}

            
          
!
999px
Loading ..................

Console