cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

<div id="main">

<div id="one" class="left_side"><h4>Metaphysical</h4></div>
<div id="two" class="left_side"><h4>Physical Reality</h4></div>
<div id="three" class="left_side"><h4>Hyperrealistic</h4></div>
<div class="clear"></div>

<div id="dragcenter">
<div id="object1">the time for relaxing in a natural setting</div>
<div id="object3">what Ronnie said when he felt the toad</div>
<div id="object5">the camaraderie in the cabin</div>
<div id="object2">unresponsive counselors</div>
<div id="object7">waiting for Ronnie without giving it away</div>
<div id="object6">unrestricted cabin behaviors</div>
<div id="object8">trouble catching the toad</div>
<div id="object4">the after-dinner campfire</div>
</div><!--end dragcenter-->

<div class="clear"></div>

<div id="feedback"></div>
<div id="logo">
<img src="http://griffininsight.com/img/griff_logo_black.png" alt="griffin insight logo">
<div class="clear"></div>
</div><!--end main-->
margin: 0px;
padding: 0px;
font-family:Arial, Helvetica, sans-serif;

.clear { clear: both; display: block; }
.f_right { float: right; }
.f_left { float: left; }
.hidden { display: none; }

border: 0px ridge #3399cc;
width: 700px;
padding: 10px;

#one { height: 280px; }
#two { height: 280px; }
#three { height: 280px; }

width: 220px;	
border:  2px solid #039;
text-align: center !important;
float: left;
margin: 0px auto 0px 7px;


padding: 0px auto 0px auto;
text-align: center;
border: 0px dashed #ff0000;

#object1, #object2, #object3, #object4, #object5, #object6, #object7, #object8
width: 146px;
background-color: #1e8da8;
border: 2px ridge #000000;
color: #fff;
cursor: pointer;
text-align: center;
padding: 6px;
margin: 4px;
float: left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* Prevent text from being selectable */
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

border: 0px solid #ff0000;
float: left;
background-color: transparent;
color: #000000;
width: 40%;
padding:0px 0px 0px 0px;

border: 0px ridge #33ff00;
float: right;
width: 158px;
padding: 0px 0px 0px 0px;
text-align: center;
              var object1 = document.getElementById('object1');
var object2 = document.getElementById('object2');
var object3 = document.getElementById('object3');
var object4 = document.getElementById('object4');
var object5 = document.getElementById('object5');
var object6 = document.getElementById('object6');
var object7 = document.getElementById('object7');
var object8 = document.getElementById('object8');

var objArray = ['#object1', '#object2', '#object3', '#object4', '#object5', '#object6', '#object7', '#object8'];
//var targArray = ['#target1', '#target2', '#target3', '#target4', '#target5'];
var startDrag = '';
var resetter = 0;
//var draggable = ui.draggable;

var j = jQuery.noConflict();
j('#object1, #object2, #object3, #object4, #object5, #object6, #object7, #object8').draggable
start: function(event,ui) {
startDrag = ui.position;
	containment: '#main',
	cursor: 'move',
	//snap: '#target1',
	//snapMode: 'inner',
	//snapTolerance: 35,
	//revert: wrong,//call the wrong function on revert
	//revert: true,
	revert: function(valid)
			j('#feedback').html('<h3>Try again!</h3>');
			return true;
	stack: 'div',//bring it to the top by adjusting z-index of the element
	drag: clearer,
	stop: function(event,ui)
	drop: right,
	accept: '#object7 , #object8'
	//tolerance: intersect
	drop: right,
	accept: '#object5 , #object4 , #object1'
	drop: right,
	accept: '#object3 , #object6 , #object2'

});//end on doc load


//clear the feedback div onDrag
function clearer(event, ui)
{ j('#feedback').html(''); }

//if the dropTarget is correct
function right(event, ui)
var draggable = ui.draggable;
draggable.draggable('option', 'revert', false);//turn revert off
//draggable.offset(j(this).offset());//lock it on top of the targets x and y
if (resetter == 8)
	j('#feedback').html('<h3 class="greentext">Congratulations! All correct!</h3>');
	j('#logo').html('<button type="button" onclick="resetIt()">Reset</button>');
	//do nothing

//on reset button click
function resetIt() {
resetter = 0;
j('#logo').html('<img src="http://griffininsight.com/img/griff_logo_blue.png" alt="griffin insight logo">');
for (x = 0; x < objArray.length; x++)
	j(objArray[x]).css('left', '0');
	j(objArray[x]).css('top', '0');
	//j(objArray[x]).css('float', 'left');
	j(objArray[x]).css('background-color', '#09C');
	j(objArray[x]).draggable('enable');//re-enable the draggable state
	j(objArray[x]).draggable({revert: function(valid) //gotta recall the revert function
			j('#feedback').html('<h3>Try again!</h3>');
			return true;

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................