We Keep Coding

Filling next available box with a random number, if first box is occupied - JS

Very new to coding and this website in particular.
I am trying to create a 'Countdown'-style numbers game which involves trying to reach a target number using 6 random numbers. There are two categories of numbers: small numbers (1-10) and large numbers (25,50,75,100). I have created a button for each category which randomly generates a number within that category.
I am able to randomly generate these numbers and populate the first card slot using .onclick method, but I am unable to populate the next 5 card slots; every time I click it randomly generates a number in the same 1st card slot.
The goal is to populate the next card slot every time I click, not all slots at once.
I am using JS. Please see attached code.
Apologies in advance for errors as this is my first post!
HTML:
//Click on small number button to generate a random small number
document.getElementById("small_number_card").onclick = function(){
genSmallNumber();
}
document.getElementById("large_number_card").onclick = function(){
genLargeNumber();
}
//FUNCTIONS//
//Generate random small number from array
function genSmallNumber(){
var smallArray = Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10);
var smallNumber = smallArray[Math.floor(Math.random()*smallArray.length)];
var cardSlot = 1;
document.getElementById("box"+cardSlot).innerHTML = smallNumber;
}
//Generate random large number from array
function genLargeNumber(){
var largeArray = Array(25,50,75,100);
var largeNumber = largeArray[Math.floor(Math.random()*largeArray.length)];
var cardSlot = 1;
document.getElementById("box"+cardSlot).innerHTML = largeNumber;
}
```
*{
font-family: monospace, 'Courier New';
}
html{
height: 100%;
background: radial-gradient(circle, white, grey);
}
::placeholder{
color: black;
opacity: 0.5;
text-transform: uppercase;
font-size: 20px;
line-height: 27px;
text-align: left;
}
#container{
width: 600px;
height: 1000px;
background: blue;
margin: 15px auto;
position: relative;
border-radius: 10px;
text-align: center;
padding: 1px;
}
#target_box{
width: 500px;
height: 200px;
background: #17bef6;
border-radius: 10px;
margin: 15px 45px;
position: relative;
border: 5px solid grey;
}
#target_number_box{
width: 200px;
height: 80px;
font-size: 80px;
line-height: 80px;
margin: 14px 150px;
background: black;
border: 5px solid grey;
color: yellow;
}
#target{
margin: 0;
padding: 0;
float: left;
width: 200px;
}
#start_button{
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
margin: 29px 45px;
border-radius: 50px;
border: 5px solid grey;
cursor: pointer;
text-align: center;
font-size: 15px;
line-height: 50px;
color: white;
}
#start_button:active{
top: 5px;
border-bottom: none;
}
#selection_box{
position: absolute;
background: grey;
height: 60px;
width: auto;
border: 5px solid grey;
left: 50px;
bottom: 14px;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
}
.box{
float: left;
width: 60px;
height: 60px;
background: blue;
margin-right: 6px;
}
#box6{
margin-right: 0;
}
#whiteboard{
background: white;
width: 550px;
height: 140px;
border-radius: 10px;
border: 5px solid grey;
position: absolute;
left: 20px;
top: 240px;
}
#working_area{
width: 530px;
height: 120px;
padding: 10px;
margin: 0;
outline: none;
border: none;
border-radius: 10px;
font-size: 20px;
color: black;
background-image: linear-gradient(to right, #e8eded 1px, transparent 1px), linear-gradient(to bottom, #e8eded 1px, transparent 1px);
background-size: 30px 30px;
line-height: 27px;
resize: none;
}
#card_selection_box{
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
}
#small_number_box{
float: left;
width: 275px;
height: 120px;
}
#large_number_box{
float: right;
width: 275px;
height: 120px;
}
.number_card{
width: 60px;
height: 60px;
background: blue;
border: 5px solid grey;
font-size: 30px;
color: white;
line-height: 60px;
cursor: pointer;
}
.number_card:active{
bottom: 5px;
border-bottom: none;
}
#small_number_card{
position: absolute;
left: 102.5px;
bottom: 10px;
}
#large_number_card{
position: absolute;
right: 102.5px;
bottom: 10px;
}
#counter_box{
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
margin: 0;
padding: 0;
line-height: 120px;
font-size: 100px;
color: white;
display: none;
}
```
<div id="container">
<div id="target_box">
<div id="target_number_box">
<span id="target">100</span>
<div id="start_button">Start</div>
<div id="selection_box">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
</div>
</div>
</div>
<div id="whiteboard">
<textarea id="working_area" placeholder="Use this area as a working space..."></textarea>
</div>
<div id="card_selection_box">
<div id="small_number_box">
Small number<br/>(1-10)
<div class="number_card" id="small_number_card">
S
</div>
</div>
<div id="large_number_box">
Large number<br/>(25, 50, 75, 100)
<div class="number_card" id="large_number_card">
L
</div>
</div>
</div>
<div id="counter_box">
<span id="counter_value">30</span>
</div>
</div>
Thanks in advance! Please avoid JQuery type answers - I'm a noob!

you need to make variable cardSlot as global or put it outside the function
var cardSlot = 1; // ==> make it global
document.getElementById("small_number_card").onclick = function() {
genSmallNumber();
}
document.getElementById("large_number_card").onclick = function() {
genLargeNumber();
}
//FUNCTIONS//
function checkResetCardSlot() {
if (cardSlot > 6) {
cardSlot = 1;
// comment or remove below if you want to keep previous value
document.querySelectorAll('#selection_box .box').forEach(function(box) {
box.textContent = "";
})
}
}
//Generate random small number from array
function genSmallNumber() {
var smallArray = Array(1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10);
var smallNumber = smallArray[Math.floor(Math.random() * smallArray.length)];
checkResetCardSlot();
document.getElementById("box" + cardSlot).innerHTML = smallNumber;
cardSlot++; // update the number here
}
//Generate random large number from array
function genLargeNumber() {
var largeArray = Array(25, 50, 75, 100);
var largeNumber = largeArray[Math.floor(Math.random() * largeArray.length)];
checkResetCardSlot();
document.getElementById("box" + cardSlot).innerHTML = largeNumber;
cardSlot++; // and here
}
``` * {
font-family: monospace, 'Courier New';
}
html {
height: 100%;
background: radial-gradient(circle, white, grey);
}
::placeholder {
color: black;
opacity: 0.5;
text-transform: uppercase;
font-size: 20px;
line-height: 27px;
text-align: left;
}
#container {
width: 600px;
height: 1000px;
background: blue;
margin: 15px auto;
position: relative;
border-radius: 10px;
text-align: center;
padding: 1px;
}
#target_box {
width: 500px;
height: 200px;
background: #17bef6;
border-radius: 10px;
margin: 15px 45px;
position: relative;
border: 5px solid grey;
}
#target_number_box {
width: 200px;
height: 80px;
font-size: 80px;
line-height: 80px;
margin: 14px 150px;
background: black;
border: 5px solid grey;
color: yellow;
}
#target {
margin: 0;
padding: 0;
float: left;
width: 200px;
}
#start_button {
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
margin: 29px 45px;
border-radius: 50px;
border: 5px solid grey;
cursor: pointer;
text-align: center;
font-size: 15px;
line-height: 50px;
color: white;
}
#start_button:active {
top: 5px;
border-bottom: none;
}
#selection_box {
position: absolute;
background: grey;
height: 60px;
width: auto;
border: 5px solid grey;
left: 50px;
bottom: 14px;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
}
.box {
float: left;
width: 60px;
height: 60px;
background: blue;
margin-right: 6px;
}
#box6 {
margin-right: 0;
}
#whiteboard {
background: white;
width: 550px;
height: 140px;
border-radius: 10px;
border: 5px solid grey;
position: absolute;
left: 20px;
top: 240px;
}
#working_area {
width: 530px;
height: 120px;
padding: 10px;
margin: 0;
outline: none;
border: none;
border-radius: 10px;
font-size: 20px;
color: black;
background-image: linear-gradient(to right, #e8eded 1px, transparent 1px), linear-gradient(to bottom, #e8eded 1px, transparent 1px);
background-size: 30px 30px;
line-height: 27px;
resize: none;
}
#card_selection_box {
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
}
#small_number_box {
float: left;
width: 275px;
height: 120px;
}
#large_number_box {
float: right;
width: 275px;
height: 120px;
}
.number_card {
width: 60px;
height: 60px;
background: blue;
border: 5px solid grey;
font-size: 30px;
color: white;
line-height: 60px;
cursor: pointer;
}
.number_card:active {
bottom: 5px;
border-bottom: none;
}
#small_number_card {
position: absolute;
left: 102.5px;
bottom: 10px;
}
#large_number_card {
position: absolute;
right: 102.5px;
bottom: 10px;
}
#counter_box {
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
margin: 0;
padding: 0;
line-height: 120px;
font-size: 100px;
color: white;
display: none;
}
```
<div id="container">
<div id="target_box">
<div id="target_number_box">
<span id="target">100</span>
<div id="start_button">Start</div>
<div id="selection_box">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
</div>
</div>
</div>
<div id="whiteboard">
<textarea id="working_area" placeholder="Use this area as a working space..."></textarea>
</div>
<div id="card_selection_box">
<div id="small_number_box">
Small number<br/>(1-10)
<div class="number_card" id="small_number_card">
S
</div>
</div>
<div id="large_number_box">
Large number<br/>(25, 50, 75, 100)
<div class="number_card" id="large_number_card">
L
</div>
</div>
</div>
<div id="counter_box">
<span id="counter_value">30</span>
</div>
</div>

How to use mouseover to change border color of a css shape(circle)?

I am trying to achieve this circular navigation menu
example : http://www.jerseywater.je/water/index.html#page_0/
I have done almost all of it!
the problem now is how to change a border of a css shape with mouseover function
edit:
"that is when i hover some other shape the border color will change in the main circle"
#circle {
width: 120px;
height: 120px;
border-radius: 70px;
box-shadow: 6px 6px 5px #888888;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border: 4px solid #73AD21;
position:absolute;
top:50%;
left:50%;
margin-top:-60px;
margin-left:-50px;
background: transparent;
}
<div id="circle">
<p id="content">
Blah Blah
</p>
</div>

$(document).ready(function(){
$( "#circle" )
.mouseenter(function() {
$( this ).css("border","black solid 1px");
})
.mouseleave(function() {
$( this ).css("border","red solid 1px");
});
});
Something like this: jsFiddle ?

This is an example of what you may want to achieve:
http://codepen.io/TunderScripts/pen/ZBBdBM
html
<div class="container">
<div class="main_circle"> Look</div>
<div class="menu_items item1">Menu Item 1</div>
<div class="menu_items item2">Menu Item 2</div>
<div class="menu_items item3">Menu Item 3</div>
<div class="menu_items item4">Menu Item 4</div>
</div>
css
* {
box-sizing: border-box;
}
.container {
width: 600px;
height: 600px;
border: 2px solid blue;
position: relative;
margin: 40px auto;
}
.main_circle {
position: absolute;
top: 50%;
display: block;
left: 50%;
width: 80px;
height: 80px;
border-radius: 100%;
border: 2px solid red;
padding: 25px 20px;
transform: translate( -50%, -50%) rotate(0deg);
background: blue;
z-index: 100;
}
.main_circle:before {
content: "";
height: 25px;
width: 30px;
display: block;
border: 2px solid red;
border-radius: 40px;
position: absolute;
float: left;
top: -10px;
z-index: 5;
}
.menu_items {
position: absolute;
height: 80px;
width: 80px;
border-radius: 100%;
border: 2px solid green;
padding: 17px;
display: block;
}
.item1 {
top: 20px;
left: 250px;
}
.item2 {
top: 260px;
right: 20px;
}
.item3 {
bottom: 20px;
left: 250px;
}
.item4 {
top: 260px;
left: 20px;
}
and js
var menuItems = $('.menu_items').length;
var step = 360 / menuItems;
$('.menu_items').on('mouseover' , function(){
var classList = $(this).attr('class');
var identifier = classList.split(' ')[1].substr(4,1);
var calc = (parseInt(identifier) - 1) * step;
var transform = 'translate(-50%, -50%) rotate(' + calc + 'deg)';
console.log(transform);
$('.main_circle').css('transform', transform);
});
if you increase the number of menu-items, reposition them with css and the js will still work. Name the classes as I did with item#(number) and it should work. Have fun.

#circle:hover {
border-color: pink;
}

In the css use :hover eg:
#circle:hover {
border: 10px solid black;
}
More details can be found here: http://www.w3schools.com/cssref/sel_hover.asp

Stopping HTML elements from becoming offset

#h1 {
float: center;
}
h2 {
float: center;
}
p {
font-family: "Comic Sans",sans-serif;
}
#div1 {
width: 7.5%;
height: 100px;
margin-left: 10px;
margin-right: 12px;
padding: 3%;
border-bottom: 4px solid black;
border-radius: 0px 0px 25px 25px;
background-color: white;
float:right;
position: absolute;
display: block;
right: 0px;
}
#div2 {
width: 7.5%;
height: 100px;
margin-left: 10px;
margin-right: 15%;
padding: 3%;
border-bottom: 4px solid black;
border-radius: 0px 0px 25px 25px;
background-color: white;
position: absolute;
display: block;
right: 0px;
}
#div3 {
width: 7.5%;
height: 100px;
margin-left: 10px;
margin-right: 30%;
padding: 3%;
border-bottom: 4px solid black;
border-radius: 0px 0px 25px 25px;
background-color: white;
position: absolute;
display: block;
right: 0px;
}
#div4 {
width: 101px;
height: 101px;
margin-left: 15%;
padding: 1%;
border-bottom: 4px solid black;
border-radius: 0px 25px 25px 0px;
background-color: white;
}
#div5 {
height: 101px;
padding: 10px;
border-bottom: 4px solid black;
border-radius: 0px 25px 25px 25px;
background-color: white;
margin: 1.5%;
}
#text {
border-bottom: 4px solid black;
padding: 1px;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
margin-left: 1.5%;
color: #417cb8;
text-align: center;
}
#tag1 {
border-bottom: 4px solid black;
padding: 1px;
margin-right: 12px;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
float: right;
position: absolute;
margin-right: 5px;
font-family: "Comic Sans",sans-serif;
right: 0px;
text-align: center;
color: #417cb8;
}
#tag2 {
margin-right: 15%;
padding: 5px;
border-bottom: 4px solid black;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
position: absolute;
font-family: "Comic Sans",sans-serif;
text-align: center;
display: block;
right: 0px;
color: #417cb8;
}
#tag3 {
margin-right: 30%;
padding: 5px;
border-bottom: 4px solid black;
width: 13%;
height: 50px;
border-radius: 25px 25px 0px 0px;
background-color: white;
position: absolute;
font-family: "Comic Sans",sans-serif;
text-align: center;
display: block;
right: 0px;
color: #417cb8;
}
#tag4 {
float: left;
padding: 5px;
border-bottom: 4px solid black;
width: 10%;
height: 101px;
border-radius: 25px 0px 0px 25px;
background-color: white;
position: absolute;
font-family: "Comic Sans",sans-serif;
text-align: center;
display: block;
margin-left: 1.5%;
color: #417cb8;
padding: 1%;
}
#element {
float: left;
}
img.object {
border: 1px solid #6496c8;
background-color: white;
border-radius: 25px;
padding: 10px;
height: 101;
width: 101;
float: center;
}
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$('#element').draggable();
$( "#div1" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "isDropped" )
.html( "Dropped!" );
}
});
</script> <script>
function allowDrop(ev, div) {
ev.preventDefault()
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id)
}
function drop(ev, div) {
ev.preventDefault()
if(div == 'div4')
{
var data = ev.dataTransfer.getData("text")
var element = document.getElementById(data)
element.parentNode.removeChild(element)
}
else if (div == 'div5') {
if(document.getElementById(div).innerHTML <= 5)
{
var data = ev.dataTransfer.getData("text")
ev.target.appendChild(document.getElementById(data))
}
}
else if (div == 'element')
{
}
else
{
if(document.getElementById(div).innerHTML <= 5)
{
var data = ev.dataTransfer.getData("text")
ev.target.appendChild(document.getElementById(data))
}
}
}
</script>
</head>
<body>
<div style="border: 1px solid black; border-radius: 30px; background-color: #6496c8;">
<h2 style="float: center; text-align: center; border-bottom: 4px solid black; width: 275px; height: 65px; border-radius: 25px 0px 0px 0px; background-color: white; margin-left: 1.5%;"><font style="text-align:center;" face="verdana" color="#417cb8" size=30>Organiser</font></h2>
<div id="tag1"><font size="7">Now</font></div><br><br><br><br>
<div id="div1" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')"></div>
<div id="tag2"><font size="7">Next</font></div><br><br><br><br>
<div id="div2" ondrop="drop(event, 'div2')" ondragover="allowDrop(event, 'div2')"></div>
<div id="tag3"><font size="7">After</font></div><br><br><br><br>
<div id="div3" ondrop="drop(event, 'div3')" ondragover="allowDrop(event, 'div3')"></div>
<br><br><br><br><br><br><br><br>
<p id="text"><font size="7">To Do</font></p>
<p id="div5" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')" overflow="Scroll">
<img class="object" src="ABC.png" draggable="true" ondragstart="drag(event)" id="drag1" width="100" height="100">
<img class="object" src="pencil.png" draggable="true" ondragstart="drag(event)" id="drag2" width="100" height="100">
<img class="object" src="recycle.png" draggable="true" ondragstart="drag(event)" id="drag3" width="100" height="100">
<img class="object" src="apple.png" draggable="true" ondragstart="drag(event)" id="drag4" width="100" height="100">
<br><br><p><div id = "tag4"><font size="10">Done</font></div>
<div id="div4" ondrop="drop(event, 'div4')" ondragover="allowDrop(event, 'div4')"><img src="https://cdn3.iconfinder.com/data/icons/tools-solid-icons-vol-2/72/59-512.png" height=100px width=100px></div><br>
</div>
</body>
</html>
When i drag and drop elements back into the starting div, they become offset, can anybody explain why please? I have tried changing tags to classes, i have tried changing drag and drop options to no avail.

You have 4 images within the <p> element. Those images are followed by line breaks <br><br> because your <p> is not properly closed. so the browser places the </p> tag right after the <br><br> instead of before like I image you meant for,
When you move the image out of the <p> and then back in, it is placed after the line break now, instead of before it. this causes the image to move to the next line.
All you need to do is place a </p> right before those <br><br> or delete the line breaks altogether.

Problems with sortable between to divs

So here is the issue, I have to divs I can't drag items, because when I release mouse button they are coming back to the original position.
Any help?
HTML
<body>
<div id="wrapper">
<div id="onHoldList" class="cellContainer">
<p>On Hold</p>
</div>
<div id="inboxList" class="cellContainer">
<p style="display: inline;">Inbox</p>
<button id="AddCardBtn">
<p>Add A Card...</p>
</button>
<div id="userAddedDiv" class="HejMedDig"></div>
</div>
</div>
</body>
CSS
body {
background-color: #DCDCDC
}
#wrapper {
margin-top: 3%;
margin-right: 20%;
height: 715px;
min-width: 300px;
min-height: 715px;
background-color: #00CCFF;
box-shadow: 7px 7px 7px #828282;
border-radius: 6px;
}
#onHoldList {
width: 275px;
height: 700px;
background-color: #f0f0f0;
border: 1px solid black;
margin-left: 1%;
margin-top: 0.4%;
border-radius: 10px;
box-shadow: 7px 7px 7px #828282;
overflow: auto;
}
#inboxList {
width: 275px;
height: 700px;
background-color: #f0f0f0;
border: 1px solid black;
margin-left: 0.5%;
margin-top: 0.4%;
border-radius: 10px;
box-shadow: 7px 7px 7px #828282;
overflow: auto;
}
.cellContainer {
width: 1%;
float: left;
margin-right: 1%;
}
#AddCardBtn {
background-color: #f0f0f0;
border: 0px;
text-decoration: none;
color: blue;
cursor: pointer;
float: right;
margin-right: 1%;
margin-top: 1%;
border-radius: 10px;
height: 4%;
width: 35%;
}
#members {
width: 275px;
height: 700px;
background-color: #f0f0f0;
border: 1px solid black;
float: right;
margin-bottom: 10%;
border-radius: 10px;
}
#userAddedDiv div {
background: red;
width: 260px;
height: 150px;
margin-left: 2.3%;
border-radius: 10px;
border: 2px solid black;
box-shadow: 0px 7px 7px #828282;
margin-bottom: 1%;
}
.createBoxButton {
display:inline-block;
padding:2px 8px;
vertical-align:middle;
text-decoration:none;
color:#000;
background:#CCC;
border:2px solid #888;
border-radius:8px;
}
.border {
border: 3px solid black;
}
JavaScript
$('document').ready(function () {
$('#AddCardBtn').click(function () {
var numberOfDiv = [100];
with(document) {
var newDiv = createElement('div');
var div = getElementById('userAddedDiv').appendChild(newDiv);
for (var i = 0; i < numberOfDiv; i++) {
numberOfDiv[i] = div;
}
}
});
$(function () {
$('#userAddedDiv').sortable({
containment: 'document',
cursor: 'crosshair',
opacity: '0.70',
connectWith: '#onHoldList',
hoverClass: '.border'
});
});
});
JSFiddle

Fiddle: http://jsfiddle.net/L2XqS/4/
You have to configure two sortable lists:
$('#userAddedDiv').sortable({
containment: 'document',
cursor: 'crosshair',
opacity: '0.70',
connectWith: '#onHoldList',
hoverClass: '.border'
});
$('#onHoldList').sortable({
containment: 'document',
cursor: 'crosshair',
opacity: '0.70',
connectWith: '#userAddedDiv',
hoverClass: '.border'
});
And to be able to to drag a div from #onHoldList to #userAddedDiv when #userAddedDiv is empty (no height):
#userAddedDiv
{
height: 90%;
}

change div parent and arrange after drag and drop

Please anyone can help me with these div s. I need to move them from a column to another using drag and drop. Actually they are dragged and dropped but i need to arrange them correctly in selected columns.
<head>
<style type="text/css">
.header {
background-color: #C0C0C0;
height:70px;
width:1308px;
border: solid;
border-width: 1px;
;
}
.columns {
background: #C1C1C1;
height:400px;
width: 1308px;
border: solid;
border-width: 1px
}
.col {
background: #C1C1C1;
float:left;
height:400px;
width: 325px;
border: solid;
border-width: 1px;
position: relative;
}
.box {
background: #F0F0F0;
cursor: move;
margin-left: auto;
margin-right:auto;
margin-top:10px;
height:100px;
width: 200px;
border: solid;
border-width: 1px;
}
#box1 {
background: #F0F0F0;
cursor: move;
margin-left: auto;
margin-right:auto;
margin-top:10px;
height:100px;
width: 200px;
border: solid;
border-width: 1px;
margin-top: 3px;
margin-left: 5px;
}
#box1.moveable {
background:#333;
border: solid;
border-width: 1px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
}
#box2 {
background: #F0F0F0;
cursor: move;
margin-left: auto;
margin-right:auto;
margin-top:10px;
height:100px;
width: 200px;
border: solid;
border-width: 1px;
margin-top: 3px;
margin-left: 5px;
}
#box2.moveable {
background:#333;
border: solid;
border-width: 1px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
}
#box3 {
background: #F0F0F0;
cursor: move;
margin-left: auto;
margin-right:auto;
margin-top:10px;
height:100px;
width: 200px;
border: solid;
border-width: 1px;
margin-top: 3px;
margin-left: 5px;
}
#box3.moveable {
background:#333;
border: solid;
border-width: 1px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
}
#box4 {
background: #F0F0F0;
cursor: move;
margin-left: auto;
margin-right:auto;
margin-top:10px;
height:100px;
width: 200px;
border: solid;
border-width: 1px;
margin-top: 3px;
margin-left: 5px;
}
#box4.moveable {
background:#333;
border: solid;
border-width: 1px;
margin-left: auto;
margin-right:auto;
margin-top:10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function startMove() {
$(".movable").on("mousemove", function(event) {
var thisX = event.pageX - $(this).width() / 2,
thisY = event.pageY - $(this).height() / 2;
$(".movable").offset({
left: thisX,
top: thisY
});
$(this.parent()).detach().css({
top: 0,
left: 0
}).appendChild();
});
}
$(document).ready(function() {
$("#box1").on("mousedown", function() {
$(this).addClass("movable");
startMove();
}).on("mouseup", function() {
$(this).removeClass("movable");
console.log($(this).attr('id'));
});
$("#box2").on("mousedown", function() {
$(this).addClass("movable");
startMove();
}).on("mouseup", function() {
$(this).removeClass("movable");
console.log($(this).attr('id'));
});
$("#box3").on("mousedown", function() {
$(this).addClass("movable");
startMove();
}).on("mouseup", function() {
$(this).removeClass("movable");
console.log($(this).attr('id'));
});
$("#box4").on("mousedown", function() {
$(this).addClass("movable");
startMove();
}).on("mouseup", function() {
$(this).removeClass("movable");
console.log($(this).attr('id'));
});
});;
</script>
</head>
<body>
<div class="header">
<p style="text-align: center; font-size: 20px;">header</p>
</div>
<div class="columns">
<div class="col" id="column1">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</div>
<div class="col" id="column2">
<div class="box" id="box3"></div>
</div>
<div class="col" id="column3"></div>
<div class="col" id="column4">
<div class="box" id="box4"></div>
</div>
</div>