A Pen by Ricardo

Developer
Ricardo
Size
2,988 Kb
Views
14,168
  1. A Pen by Ricardo Previews
  2. A Pen by Ricardo HTML Codes
  3. A Pen by Ricardo CSS Codes
  4. A Pen by Ricardo JS Codes

How do I make an a pen by ricardo?

What is a a pen by ricardo? How do you make a a pen by ricardo? This script and codes were developed by Ricardo on 24 September 2022, Saturday.

A Pen by Ricardo Previews
IQ Test

A Pen by Ricardo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Ricardo</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="columns"> <div id="A" class="column" draggable="true"><header id="hA">A</header></div> <div id="B" class="column" draggable="true"><header id="hB">B</header></div> <div id="C" class="column" draggable="true"><header id="hC">C</header></div>
</div>
<textarea id="logbox" style="height:1000px;width:500px"></textarea> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Ricardo - Script Codes CSS Codes

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; /* Required to make elements draggable in old WebKit */ -khtml-user-drag: element; -webkit-user-drag: element;
}
.column { height: 150px; width: 150px; float: left; border: 2px solid #666666; background-color: #ccc; margin-right: 5px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: inset 0 0 3px #000; -ms-box-shadow: inset 0 0 3px #000; box-shadow: inset 0 0 3px #000; text-align: center; cursor: move;
}
.column header { color: #fff; text-shadow: #000 0 1px; box-shadow: 5px; padding: 5px; background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21)); background: -webkit-gradient(linear, left top, right top, color-stop(0, rgb(0,0,0)), color-stop(0.50, rgb(79,79,79)), color-stop(1, rgb(21,21,21))); background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21)); background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21)); border-bottom: 1px solid #ddd; -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -ms-border-radius-topleft: 10px; border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -ms-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px;
}
.column.over { border: 2px dashed #000;
}

A Pen by Ricardo - Script Codes JS Codes

var dragSrcEl = null;
function handleDragStart(e) { log("dragstart: " + e.srcElement.id + " content: " + $('header', e.srcElement).attr('id')); console.log(e); // Target (this) element is the source node. this.style.opacity = '0.4'; dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) { //log("dragover: " + this.id); //console.log(e); if (e.preventDefault) { e.preventDefault(); // Necessary. Allows us to drop. } e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object. return false;
}
function handleDragEnter(e) { log("dragenter: " + e.srcElement.id + " content: " + $('header', e.srcElement).attr('id')); console.log(e); // this / e.target is the current hover target. this.classList.add('over');
}
function handleDragLeave(e) { log("dragleave: " + this.id); console.log(e); this.classList.remove('over'); // this / e.target is previous target element.
}
function handleDrop(e) { log("drop: " + this.id); console.log(e); // this/e.target is current target element. if (e.stopPropagation) { e.stopPropagation(); // Stops some browsers from redirecting. } // Don't do anything if dropping the same column we're dragging. if (dragSrcEl != this) { // Set the source column's HTML to the HTML of the column we dropped on. dragSrcEl.innerHTML = this.innerHTML; this.innerHTML = e.dataTransfer.getData('text/html'); } return false;
}
function handleDragEnd(e) { log("dragend: " + this.id); console.log(e); // this/e.target is the source node. this.style.opacity = '1'; [].forEach.call(cols, function (col) { col.classList.remove('over'); });
}
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function (col) { col.addEventListener('dragstart', handleDragStart, false); col.addEventListener('dragenter', handleDragEnter, false) col.addEventListener('dragover', handleDragOver, false); col.addEventListener('dragleave', handleDragLeave, false); col.addEventListener('drop', handleDrop, false); col.addEventListener('dragend', handleDragEnd, false);
});
var textarea = document.getElementById('logbox');
function log(s) { console.log(s); $('#logbox').append(s + "\n"); textarea.scrollTop = textarea.scrollHeight;
}
A Pen by Ricardo - Script Codes
A Pen by Ricardo - Script Codes
Home Page Home
Developer Ricardo
Username ricardohu
Uploaded September 24, 2022
Rating 3
Size 2,988 Kb
Views 14,168
Do you need developer help for A Pen by Ricardo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ricardo (ricardohu) Script Codes
Name
Fashion celebrity container Bootstrap 2.3.2
Single Chat Window
Color Generator with LESS
Fashion celebrity container
RevContent Javascript Injection
Color Gradients with Less
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!