Problems with sortable between to divs - javascript

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

Related

Is it possible to display respective country flag to out side of the select function. Or Can we display country flag on the both place

function onChangeCallback(ctr) {
console.log("The country was changed: " + ctr);
//$("#selectionSpan").text(ctr);
}
$(document).ready(function() {
$(".niceCountryInputSelector").each(function(i, e) {
new NiceCountryInput(e).init();
});
});
.container {
margin: 80px auto !important;
padding: 15px;
}
.bg-box1 {
background-color: #E8E8E8;
padding: 30px;
/* width: 460px;*/
width: 700px;
box-shadow: 3px 3px 5px #808080;
border-radius: 6px;
}
.bg-box {
box-shadow: 1px 1px 3px #484848;
border-radius: 6px;
}
select {
border-radius: 6px;
}
.search {
src: url(img/search.png);
}
.niceCountryInputMenu {
background: white !important;
color: black !important;
border: 1px solid #a8a8a8;
cursor: pointer;
border-radius: 4px;
box-shadow: 1px 1px 3px #808080
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDefaultText {
width: 270px;
padding: 6px;
margin: 6px 0px 0px 15px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.1rem;
}
.niceCountryInputMenuDefaultText a:hover {
text-decoration: none;
}
.niceCountryInputMenu a {
color: #787878 !important;
}
.niceCountryInputMenuDropdown {
/*border-left: 1px solid #a8a8a8;*/
height: 30px;
width: 25px;
float: right;
line-height: 30px;
padding: 8px;
text-align: center;
position: relative;
right: 0;
color: #484848;
}
.niceCountryInputMenuDropdownContent {
border: 1px solid #a8a8a8;
background-color: #fff;
font-size: 1.1rem;
border-top: 0;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.niceCountryInputMenuDropdownContent a {
height: 40px;
line-height: 40px;
display: block;
width: 100%;
color: #787878 !important;
overflow: hidden;
text-decoration: none;
border: 1px solid #F5F5F5;
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDropdownContent a:hover {
background-color: #63a2d7 !important;
color: white !important;
text-decoration: none;
}
.niceCountryInputMenuFilter {
border: 1px solid #a8a8a8;
border-top: -10;
border-bottom: 0;
}
.niceCountryInputMenuFilter input {
width: 100%;
width: calc(100% - 10px);
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
outline: none;
border-radius: 6px;
font-size: 1.1rem;
color: #808080;
}
.niceCountryInputMenuCountryFlag {
border: 1px solid #d3d3d3;
width: 23px;
height: 18px;
margin-left: 5px;
margin-right: 5px;
}
.niceCountryInputMenuCountryNoFlag {
display: inline-block;
border: 1px solid black;
background: white;
color: black;
line-height: 15px;
text-align: center;
width: 22px;
margin-left: 5px;
margin-right: 5px;
font-size: 13px;
}
<script src="https://manishasecurity.in/creative-js/niceCountryInput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>Select a Country:</h3>
<div class="bg-box1">
<div class="row">
<div class="col-4">
<div style="background-color: #fff; width: 160px; height: 50px;margin-top: 0px; padding: 4px; border-radius: 6px;font-size: 12px;" data-showflags="true" class=""></div>
</div>
<div class="col-8">
<div class="niceCountryInputSelector bg-box" style="width: 400px;" data-selectedcountry="ad" data-showspecial="false" data-showflags="true" data-i18nall="All selected" data-i18nnofilter="No selection" data-i18nfilter="Search Country..." data-onchangecallback="onChangeCallback" />
</div>
</div>
</div>
</div>
Hi,
I have made the country flag dropdown list.
In the dropdown list, whether it is scroll by mouse or search country name in the search box, the country will be autocompleted and it will be displayed in the input field with the country name and flag.
The dropdown function working properly.
Requirement:-
Without removing its Name and flag from the dropdown section, Can we display Country Flag outside of the dropdown section?. I am trying for that but I am not able to do that.
I hope someone can understand and help me out in this situation.
Thanks Lots

I modified the function onChangeCallback to place the flag to the other div.
function onChangeCallback(ctr) {
let flag=$(".niceCountryInputSelector").find("[data-flagiso='"+ctr+"']")[0];
flag=$(flag).clone();
$(".col-4").children("div:first-child").empty();
$(".col-4").children("div:first-child").append(flag);
}
So, you can append the flagObjElement to where you want to append.

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.

Hide custom dropdown menu li once input checked

I have a custom dropdown menu in pure html . i have tried everything to get it to close but nothing works. I just want it to close once something was selected / somewhere outside the menu is clicked. it appears as my custom css is preventing any simple solution.
here is the code i have for it and css and current js. i understand that this may be a frequently asked question but im still a novice at javascript and even though i feel as if i've implemented all the solutions i could, its possible i havent done so correctly. thank you
$('#dropdown li').click(function() {
$(".dd-button:first-child").text($(this).text());
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
margin-left: -25%;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<label class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id = "dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</label>
</div>

Add this to your Javascript.
Include id to you <h1>
$('#dropdown li').click(function() {
$('#result').replaceWith('<h1 id="result">' + $(this).text() + '</h1>');
});
$(document).ready(function() {
// Show hide popover
$(".dropdown").click(function() {
$(this).find("#dropdown").slideDown("fast");
});
});
$(document).on("click", function(event) {
var $trigger = $(".dropdown");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#dropdown").slideUp("fast");
}
});
And you can even hide the dropdown by $('.dropdown').hide();
$('#dropdown li').click(function() {
$('#result').replaceWith('<h1 id="result">' + $(this).text() + '</h1>');
});
$(document).ready(function() {
// Show hide popover
$(".dropdown").click(function() {
$(this).find("#dropdown").slideDown("fast");
});
});
$(document).on("click", function(event) {
var $trigger = $(".dropdown");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#dropdown").slideUp("fast");
}
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
margin-left: -25%;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<label class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id = "dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</label>
</div>

You can simply use $(event.target).hasClass() condition to open or hide the dropdown...
Also don't use div inside a label because
Element div not allowed as child of element label in this context.
Stack Snippet
$('#dropdown li').click(function() {
$(".dd-button:first-child").text($(this).text());
});
$(document).on("click", function(event) {
if ($(event.target).hasClass("dd-button")) {
$("#dropdown").slideDown("fast");
} else {
$("#dropdown").slideUp("fast");
}
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<div class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id="dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</div>
</div>

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.

Removing and Adding classes with button

I'm trying to use a button to remove the class .computer-off and add .computer-on and vice versa when clicked again. I've tried quite a few approaches, but to no avail. Here's one approach:
HTML:
<div id="computer-screen" class="computer-off">
<button onclick="computerPower()" class="power-button">Power</button>
</div>
JS:
function computerPower() {
if ( $("#computer-screen").hasClass('computer-off') ) {
document.getElementById('computer-screen').removeClass('computer-off').addClass('computer-on');
} else {
document.getElementById("computer-screen").removeClass('computer-on').addClass('computer-off');
}
};

I'd suggest, given that you appear to (be trying to) use jQuery:
$('#power').on('click', function() {
$('#computer-screen').toggleClass('computer-off computer-on');
});
$('#power').on('click', function() {
$('#computer-screen').toggleClass('computer-off computer-on');
});
#computer {
width: 60%;
margin: 1em auto;
padding: 1em;
border: 1px solid darkgrey;
overflow: hidden;
border-radius: 0.4em 0.4em 0 0;
}
#computer-screen {
border-radius: 0.5em;
height: 15em;
}
.computer-off {
background-color: #000;
}
.computer-on {
background-color: #060;
box-shadow: 0 0 1.0em #060;
}
#power {
cursor: pointer;
position: relative;
float: right;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 50%;
border: 1px solid #aaa;
margin-top: 0.3em;
}
.computer-on + #power {
box-shadow: inset 0 1px 3px #666;
}
#power::before {
content: '';
position: absolute;
top: 0.3em;
bottom: 0.75em;
left: 0.9em;
right: 0.9em;
background-color: #ccc;
}
#power::after {
content: '';
height: 1em;
width: 1em;
position: absolute;
border: 0.2em solid #ccc;
border-top-color: transparent;
border-radius: 50%;
bottom: 0.3em;
left: 0.3em;
}
#computer-screen.computer-on + #power::before {
background-color: #0f0;
}
#computer-screen.computer-on + #power::after {
border-color: #0f0;
border-top-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="computer">
<div id="computer-screen" class="computer-off"></div>
<div id="power"></div>
</div>
Or, in plain JavaScript:
document.getElementById('power').addEventListener('click', function() {
var screen = document.getElementById('computer-screen');
screen.classList.toggle('computer-off');
screen.classList.toggle('computer-on');
});
document.getElementById('power').addEventListener('click', function() {
var screen = document.getElementById('computer-screen');
screen.classList.toggle('computer-off');
screen.classList.toggle('computer-on');
});
#computer {
width: 60%;
margin: 1em auto;
padding: 1em;
border: 1px solid darkgrey;
overflow: hidden;
border-radius: 0.4em 0.4em 0 0;
}
#computer-screen {
border-radius: 0.5em;
height: 15em;
}
.computer-off {
background-color: #000;
}
.computer-on {
background-color: #060;
box-shadow: 0 0 1.0em #060;
}
#power {
cursor: pointer;
position: relative;
float: right;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 50%;
border: 1px solid #aaa;
margin-top: 0.3em;
}
.computer-on + #power {
box-shadow: inset 0 1px 3px #666;
}
#power::before {
content: '';
position: absolute;
top: 0.3em;
bottom: 0.75em;
left: 0.9em;
right: 0.9em;
background-color: #ccc;
}
#power::after {
content: '';
height: 1em;
width: 1em;
position: absolute;
border: 0.2em solid #ccc;
border-top-color: transparent;
border-radius: 50%;
bottom: 0.3em;
left: 0.3em;
}
#computer-screen.computer-on + #power::before {
background-color: #0f0;
}
#computer-screen.computer-on + #power::after {
border-color: #0f0;
border-top-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="computer">
<div id="computer-screen" class="computer-off"></div>
<div id="power"></div>
</div>
References:
JavaScript:
document.querySelector().
Element.classList.
jQuery:
toggleClass().

Categories