JSFiddle - React, Tailwind, and code Playground

by rebeccaoutofourmindsstudios

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<script type="text/javascript" src="http://eruciform.com/static//jquidragcollide/jquery-collision.js"></script>
<script type="text/javascript" src="http://eruciform.com/static//jquidragcollide/jquery-ui-draggable-collision.js"></script>	
</head>


<body>
	<div class="moveInHere" id="moveInHere">
		<div class="dragMe" id="dragMe">Drag me...</div>
		<div class="obstacle" id="obstacle">...but not in here.</div>
		<div class="target" id="Target1">I want to change color</div>
	</div>

CSS

#moveInHere {
    with: 500px;
    height: 500px;
    border: 1px solid black;
    background: #eee;
}
.dragMe{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background: #eee;
}
.obstacle{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background: #eee;
}
.target{
	postition: absolute;
	top:100px;
	left:200px;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background: #eee;
}

JavaScript

$(".dragMe").draggable({
    obstacle: ".obstacle",
    preventCollision: true,
    containment: "#moveInHere"
});

$(".obstacle").draggable({
    obstacle: ".dragMe",
    preventCollision: true,
    containment: "#moveInHere"
});

$(document).ready(function() {
  $("#dragMe").draggable({ containment: ".moveInHere", obstacle: ".obstacle" });
  $("#obstacle").draggable({ containment: ".moveInHere" });
  $("#Target1").droppable({
    tolerance: "touch",
    preventCollision: true,
    drop: dropItem
  });
  });

function dropItem(ev, ui) {
	$("#Target1").css({ background: "blue" });
  
}