change div parent and arrange after drag and drop - javascript

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>

Related

Make element draggable for touchscreen

I made a game where you have to drag the right figures to each other. But it won't work for touchscreen (it only has to work for touchscreen). Can someone help me? I would appreciate if you write the code i need since i am a beginner at coding and i dind'd manage to let it work with articles.
$(document).ready(function () {
$(".selectable").draggable({
addClasses: false,
snap: true,
stack: ".destination",
scroll: false
});
$(".destination").draggable({
snapMode: "inner"
});
$(".destination").draggable("disable");
$(".destination").droppable({
drop: function (event, ui) {
var selectedShape = ui.draggable.attr("id");
var dropZone = $(this).attr("id");
dropZone = dropZone.replace("inside", "");
if(selectedShape == dropZone)
{
$("#" + selectedShape).draggable("disable");
checkShapeStatus();
}
//Als je een fout maakt
else {
alert("Wrong choice!");
}
}
});
});
function checkShapeStatus() {
var counter = 0;
$(".selectable").each(function () {
var $thisId = $(this);
var booleanValue = $thisId.draggable('option', 'disabled');
if (booleanValue)
{
counter = counter + 1;
}
else {
}
//Als je alles goed hebt
if(counter == 4)
{
win.play();
}
})
}
#square {
width: 100px;
height: 100px;
background: red;
margin-top: 8%;
z-index:1;
}
#circle {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin-top: 8%;
z-index:2;
}
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
margin-top: 8%;
z-index:3;
}
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid yellow;
border-left: 60px solid yellow;
border-bottom: 60px solid yellow;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
margin-top: 8%;
z-index:4;
}
#squareinside {
width: 100px;
height: 100px;
background: gray;
margin-top: 8%;
}
#circleinside {
width: 100px;
height: 100px;
background: gray;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin-top: 8%;
}
#triangle-upinside {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid gray;
margin-top: 8%;
}
#pacmaninside {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid gray;
border-left: 60px solid gray;
border-bottom: 60px solid gray;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
margin-top: 8%;
}
body {
background-color:bisque;
overflow:hidden;
}
#centerText {
font-family: 'Rock Salt', cursive;
font-size:xx-large;
style="width:100%;
height:100%;
z-index:0;
text-align: center;
margin-top: 2%;
}
.grid-1 {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
margin-left: 30%;
margin-top: 50px;
}
.grid-2 {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
margin-left: 30%;
margin-top: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shape Matching</title>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div id="centerText" style="width:100%; height:100%; z-index:0;" align="center">
Match the Shapes!
</div>
<div class="grid-1">
<div id="pacmaninside" class="destination"></div>
<div id="triangle-upinside" class="destination"></div>
<div id="circleinside" class="destination"></div>
<div id="squareinside" class="destination"></div>
</div>
<div class="grid-2">
<div id="square" class="selectable"></div>
<div id="circle" class="selectable"></div>
<div id="triangle-up" class="selectable"></div>
<div id="pacman" class="selectable"></div>
</div>
<audio id="win" src="media/win.mp3"></audio>
</body>
</html>
So i want to make this game work for a touchscreen device.

Anyone have easy way to create this using css and html?

I have done this with below code, But I this it is a difficult way to do this anyone have easy way for create this with css and html.
.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>
.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>
In this way you can add as many items as you want.
.p {
display: flex;
position: relative;
padding-top: 15px;
border-top: 2px solid red;
margin-bottom: 30px;
}
.p div {
position: relative;
flex: 1;
text-align: center;
}
.p div:after {
content: '';
position: absolute;
height: 15px;
width: 2px;
background: red;
top: -15px;
}
.p div:not(:first-child):not(:last-child):after {
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.p div:first-child {
text-align: left;
}
.p div:first-child:after {
left: 0;
}
.p div:last-child {
text-align: right;
}
.p div:last-child:after {
right: 0;
}
<div class="p">
<div>
Low
</div>
<div>
Average
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -2
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
Average 2
</div>
<div>
High
</div>
</div>
This is just a sample you can modify it to meet your requirments
.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
}
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
padding-top:40px;
}
<div class="box">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
.grid{width:calc(100% - 20px);max-width:1000px;margin:0 auto;;border-top:3px solid red;display:flex;flex-direction:row;align-items:baseline;justify-content: space-between;}
.fline{position:relative;overflow:hidden;min-height:40px;float: left;padding-top: 20px;}
.fline::before{position:absolute;content:"";top:0;width:2px;height:20px;background:red}
.fline:first-child::before{left:0}
.fline:nth-of-type(2)::before{left:calc(50% - 2px)}
.fline:last-child::before{left:unset;right:0}
<div class="grid">
<div class="fline">Low</div>
<div class="fline">High</div>
<div class="fline">Average</div>
</div>
.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline">Low</div>
<div class="fline1">Average</div>
<div class="fline2">High</div>
First you need to define one outer wrap and define width as you want to this.
And position:relative for this.
For first inner div with float:left; and last with float:right;.
And center div with position:absolute; with margin:auto; from left and right;
And margin-top depend on your parent div outer-wrap width for inner div like: fline,fline1,fline2
.outer-wrap{
width: 80%;
height: 1px;
background-color: #000;
margin: auto;
text-align: center;
position: relative;
}
.fline {
width: 2px;
background-color: black;
height: 10px;
float: left;
margin-top: 1px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
float: right;
margin-top: 1px;
}
<div class="outer-wrap">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>
</div>
This one is the right answer to this question
.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>

Partially fill object when hovering

I have code below for a content cycle I have created with the help from some other Stack Overflow users. Is it possible to have the circular arrow fill up partially depending on what box your hovered on. Example: If the user hovers on box four (the bottom box) the circular arrow would fill up with a different color only up until that box. Is this possible to do with pure CSS only? If not would this be possible with vanilla JavaScript (no Jquery)? Anything helps, cheers.
.container .row {
text-align: center;
position: relative;
}
.row {
position: relative;
}
.one {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.one:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.two {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
margin-left: -35px;
}
.two:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.three {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
margin-left: -35px;
}
.three:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.four {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.four:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.five {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.five:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.six {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.six:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.circle {
display: inline-block;
background-color: #006850;
width: 85px;
height: 85px;
border-width: 3px;
border-style: solid;
border-color: #fefefe;
border-radius: 50%;
box-shadow: 0px 1px 5px #888888;
margin-bottom: -15px;
}
.invisible {
visibility: hidden;
display: inline-block;
background-color: #1f497d;
width: 130px;
height: 65px;
border-width: 3px;
border-style: solid;
border-color: #d6d6d6;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.arrow {
color: #d0d3d8;
width: 250px;
height: 250px;
border: 17px solid;
border-radius: 50%;
position: absolute;
top: 15px;
left: 50%;
transform: translate(-50%, 0);
z-index: -1;
}
.arrow:before {
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
bottom: 0;
top: -10px;
left: 55px;
background: #fff;
transform: rotate(-120deg);
}
.arrow:after {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #d0d3d8;
position: absolute;
top: 0px;
left: 40px;
transform: rotate(-120deg);
}
<div class="container">
<div class="row">
<div class="one"></div>
</div>
<div class="row" style="margin-top:-15px;">
<div class="six"></div>
<div class="invisible"></div>
<div class="two"></div>
</div>
<div class="row" style="margin-top:-15px;">
<div class="invisible"></div>
<div class="circle"></div>
<div class="invisible"></div>
</div>
<div class="row" style="margin-top:-15px;">
<div class="five"></div>
<div class="invisible"></div>
<div class="three"></div>
</div>
<div class="row">
<div class="four"></div>
</div>
<div class="arrow"></div>
</div>
I have fully changed your layout.
Now everything works ok. And also, making changes in the position will be easier.
.container {
width: 250px;
height: 250px;
position: absolute;
top: 45px;
left: 0px;
right: 0px;
margin: auto;
}
.ele, .arrow, .circle {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
#one {
transform: rotate(0deg) translateY(-130px) rotate(0deg);
}
#two {
transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}
#three {
transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}
#four {
transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}
#five {
transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}
#six {
transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}
.ele {
display: inline-block;
background-color: #1f497d;
width: 100px;
height: 50px;
border-width: 3px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
}
.ele:hover {
cursor:pointer;
transform:scale(1.019);
border-color:f4f4f4;
background-color:#214d84;
box-shadow: 0px 2px 9px #888888;
}
.circle {
background-color: #006850;
width: 85px;
height: 85px;
border-width: 3px;
border-style: solid;
border-color: #fefefe;
border-radius: 50%;
box-shadow: 0px 1px 5px #888888;
}
.arrow {
color: #d0d3d8;
width: 250px;
height: 250px;
border: 17px solid;
border-radius: 50%;
position: absolute;
z-index: -3;
left: -17px;
}
#two:hover ~ .arrow {
border-top-color: red;
transform: rotate(24deg);
}
#three:hover ~ .arrow {
border-top-color: red;
transform: rotate(66deg);
}
#four:hover ~ .arrow {
border-top-color: red;
border-right-color: red;
transform: rotate(25deg);
}
#five:hover ~ .arrow {
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
transform: rotate(26deg);
}
#six:hover ~ .arrow {
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
transform: rotate(66deg);
}
#one:hover ~ .arrow {
border-color: red;
}
#one:hover ~ .circle:after {
border-top-color: red;
}
.circle:before {
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
bottom: 0;
top: -96px;
left: -36px;
background: #fff;
background-color: white;
transform: rotate(-120deg);
z-index: -1;
}
.circle:after {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #d0d3d8;
position: absolute;
top: -83px;
left: -44px;
transform: rotate(-120deg);
}
<div class="container">
<div class="ele" id="one">1</div>
<div class="ele" id="two">2</div>
<div class="ele" id="three">3</div>
<div class="ele" id="four">4</div>
<div class="ele" id="five">5</div>
<div class="ele" id="six">6</div>
<div class="arrow"></div>
<div class="circle"></div>
</div>
If you don't mind using images for your arrow, you could have a different image for the arrow depending on which box is hovered and then you can change the image out via css:
.one:hover {
background: url("box1arrow.jpg"); // obviously, set this to whichever image you need
}

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%;
}

Categories