We Keep Coding

Multiple (2) Drag Drop JQuery

I have two drag and two drop zones that I'd like to keep exclusive from one another. I've been playing around with the connectWith argument unsuccessfully and was hoping to get some help connecting sortable_alpha to droppable_alpha and sortable_numbers to droppable_numbers. I also need to be able to use the .append function to add a delete button inside the drop divs which I have code for in the second chunk I realize there's lots of great JQuery draggable posts but couldn't find one on distinguishing separate drop zones so thanks for any help!
Drag Works but Not Drop
$(function () {
$("#sortable_numbers").sortable();
$("#sortable_numbers").disableSelection();
$("#sortable_alpha").sortable();
$("#sortable_alpha").disableSelection();
// once this works for numbers repeat this for the letters?
// create drag and drop where on drop a delete button is added to the list object
$(".draggable_numbers").draggable();
$("#droppable_numbers").droppable();
});
#droppable_numbers,
#droppable_alpha {
border: dashed 1px grey;
min-height: 100px;
width:100px;
float:left;
}
#sortable_numbers,
#sortable_alpha {
list-style-type: none;
margin: 0;
padding-bottom: 2px;
width: 50px;
float:left;
}
ul {
list-style: none;
padding-left: 0;
}
li {
list-style-type: none;
padding-bottom: 2px;
}
#sortable_numbers li,
#sortable_alpha li {
border: 1px solid lightgray;
}
#sortable_numbers li:hover,
#sortable_alpha li:hover {
cursor: grab;
}
#sortable_numbers .ui-sortable-helper:hover,
#sortable_alpha .ui-sortable-helper:hover {
cursor: grabbing;
background-color: #ddd;
border-color: black;
}
.droppable_numbers,
.droppable_alpha {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
/*
Need to change this so that the alpha blocks
Only change color when hovered over droppable-alpha
And droppable-numbers with sortable_numbers
*/
#droppable_alpha.ui-droppable-hover,
#droppable_numbers.ui-droppable-hover {
background: #bad4ed;
}
#droppable_numbers select {
margin: 5px;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable_alpha">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
<div id="droppable_alpha">Drop Letters</div>
<div id="droppable_numbers">Drop Numbers</div>
<ul id="sortable_numbers">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
Working on an Answer
$(function () {
$("#sortable_numbers").sortable();
$("#sortable_numbers").disableSelection();
$("#sortable_alpha").sortable();
$("#sortable_alpha").disableSelection();
// once this works for numbers repeat this for the letters?
// create drag and drop where on drop a delete button is added to the list object
$(".draggable_numbers").draggable();
$("#droppable_numbers").droppable({
drop: function (event, ui) {
// take the id of the dropped block
// then create a new, unique id
// then append a delete button to the block
// inside the drop numbers
var draggableId = ui.draggable.attr("id");
var newid = getNewId(draggableId);
$(this).append("
<div>
<div>
<div class="form-group drop_area">
<label class="control-label" for="${newid}">${newid}</label>
<button class="delete">Delete</button>
</div>
</div>
</div>")
}
}
});
});
#droppable_numbers,
#droppable_alpha {
border: dashed 1px grey;
min-height: 100px;
width:100px;
float:left;
}
#sortable_numbers,
#sortable_alpha {
list-style-type: none;
margin: 0;
padding-bottom: 2px;
width: 50px;
float:left;
}
ul {
list-style: none;
padding-left: 0;
}
li {
list-style-type: none;
padding-bottom: 2px;
}
#sortable_numbers li,
#sortable_alpha li {
border: 1px solid lightgray;
}
#sortable_numbers li:hover,
#sortable_alpha li:hover {
cursor: grab;
}
#sortable_numbers .ui-sortable-helper:hover,
#sortable_alpha .ui-sortable-helper:hover {
cursor: grabbing;
background-color: #ddd;
border-color: black;
}
.droppable_numbers,
.droppable_alpha {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
/*
Need to change this so that the alpha blocks
Only change color when hovered over droppable-alpha
And droppable-numbers with sortable_numbers
*/
#droppable_alpha.ui-droppable-hover,
#droppable_numbers.ui-droppable-hover {
background: #bad4ed;
}
#droppable_numbers select {
margin: 5px;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable_alpha">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
<div id="droppable_alpha">Drop Letters</div>
<div id="droppable_numbers">Drop Numbers</div>
<ul id="sortable_numbers">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>

Absolute element on the top of relative element hover and on-click problem

I am having a problem with an absolute element. This element is the floating-count which is on the top of the navigation.
Problem is when I hover my mouse on floating-count element, the drop-down arrow also is hovering (it should suppose to hover or change color when the navigation hovers). Then when I am clicking the floating-count element the drop-down navigation also showing (it should suppose to show when the navigation was clicked).
I tried changing (playing with it as I expect to see the solution) and adding z-index to the elements but I am confused with it.
Code here:
$('.mnav').on('click', function() {
if ($(this).children('.dpdown').is(":hidden")) {
console.log('show');
$(this).children('.dpdown').slideDown("fast");
} else {
$(this).children('.dpdown').slideUp("fast");
console.log('hide');
}
});
li.mnav,
.navigation ul.right li.mnav {
display: inline-block;
position: relative;
}
a.text-link,
.navigation ul.right li.mnav a.text-link {
color: #fff;
font-size: 15px;
line-height: 15px;
padding: 14px 24px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.nav-arrow {
background: yellow;
}
.nav-arrow:after {
top: 40%;
right: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #1b6b00;
border-width: 8px;
}
.floating-count {
position: absolute;
z-index: 1;
border-radius: 20px;
background: red;
padding: 4px 8px;
top: -12px;
right: -2px;
text-decoration: none;
color: #FFF;
}
.dpdown {
position: absolute;
left: 0;
top: 50px;
width: 300px;
display: none;
z-index: 1;
}
.dpdown ul li a {
font-size: 12px;
color: #eaf2ac;
padding: 5px 30px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.dpdown ul {
list-style-type: none;
background-color: #1b6b00;
text-align: left;
margin: 0;
padding: 4px 0;
}
ul.right {
list-style-type: none;
background-color: #208100;
text-align: center;
margin: 0;
padding: 0;
float: left;
border-radius: 5px;
}
ul.right li.mnav:hover,
.navigation ul.right li.mnav a.text-link:hover {
color: #ffea00;
}
.dpdown:hover>.nav-arrow:after {
color: #ffea00;
}
.navigation .mnav:hover>.nav-arrow:after {
border-top-color: #ffea00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<ul class="right">
<li class="mnav">
Drop Down<span class="nav-arrow"></span>
<span class="floating-count-wrap"><a class="floating-count" href="/#count">2</a></span>
<div class="dpdown">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
</li>
</ul>
</div>
Try it in jsfiddle:

You have the hover style based on .mnav and the js dropdown triggered by .mnav but .floating-count-wrap is a child of .mnav so it is triggering those events.
I adjusted the css and js to use .mnav .test-link as the selector. I also had to make the css rule use sibling and not parent selection. Similarily, in the js, the selector for the dropdown is no longer a child of $(this) so I updated that to $(this).parent()
updated js fiddle
js
$('.mnav .text-link').on('click', function() { ... });
css
.navigation .mnav .text-link:hover + .nav-arrow:after { ... }

HTML and JS Conflicting Elements (MouseOver)

I'm attempting to have an element in my layout to change text and background colors onMouseOver, and then revert to their original state when rolled off. The problem is that JS doesn't seem to recognize the nature of my CSS.
The element (#sidebar) has these pieces of CSS code (code of the sidebar itself not relevant):
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width:100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
And it looks like this, prior to OnMouseOver:
This is the JS I'm using to attempt the onMouseOver:
<script type="text/javascript">
function changeColor(myColor) {
var sidebar = document.getElementById('sidebar li');
sidebar.style.fontcolor = "#6588C7";
sidebar.style.backgroundColor = "#6588C7";
}
</script>
With this implementation in the div:
<div id ="sidebar li">
<ul><li onmouseover="changeColor('new color')"><p class="class1">writing<p></li></ul>
</div>
But it does this to my sidebar instead:
How can I get the color to stay in the little boxes?

You can really simplify your code by using :hover instead of onmouseover.
I am using a flexbox for li to make center alignment easy. You do not longer need to suppress the list-style because the list items are no longer displayed as a list-item.
You may no longer need class1 for the paragraphs. I just kept them in.
function changeText(myText) {
//find variable on page called 'myContent' and give it var name display
var display = document.getElementById('content');
display.innerHTML = "";
display.innerHTML = "New content.";
}
#sidebar li {
width: 100px;
height: 100px;
border-radius: 25px;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
display: flex;
align-items: center; /* Vertical alignment */
justify-content: center; /* Horizontal alignment */
}
#sidebar li:hover {
background-color: red;
}
/* Apply top margin to all list elements except for the first one */
#sidebar li:not(:first-child) {
margin-top: 10px;
}
#content {
border-radius: 25px;
width: 750px;
height: 500px;
margin-top: 50px;
margin-left: 300px;
background-color: azure;
padding: 50px;
}
<div id="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
<li>
<p class="class1">games/art<p>
</li>
<li>
<p class="class1">music<p>
</li>
</ul>
</div>
<div id="content" onclick="changeText()"> <p>Content here.</p> </div>

getElementById accepts id argument, but you are passing it a selector instead. You may want to use document.querySelector instead. Query selector documentation:
Query Selector

Your div id is not correct. It should be like this:
<div id ="sidebar">
<ul><li onmouseover="changeText('new text')" onmouseout="resetText()"><p class="class1">writing<p></li>
</div>

You don't need javascript for something as trivial as this. You could use :hover CSS pseudo-class. Read more about it here
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width:100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
#sidebar li:hover {
color: tomato;
background: #333
}
<div id ="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
<li>
<p class="class1">writing 2<p>
</li>
</ul>
</div>

div id name is incorrect
var sidebar = document.getElementById('sidebar-li');
<script type="text/javascript">
function changeColor(myColor) {
var sidebar = document.getElementById('sidebar-li');
sidebar.style.fontcolor = "#6588C7";
sidebar.style.backgroundColor = "#6588C7";
}
</script>
and
<div id ="sidebar-li">
<ul>
<li onmouseover="changeColor('#ffffff')">
<p class="class1">writing<p>
</li>
</ul>
</div>

Based on your code you could do :
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width: 100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
<div id="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
</ul>
</div>
<script type="text/javascript">
function changeColor(e) {
var sidebar = e.currentTarget;
sidebar.style.color = "#fff";
sidebar.style.backgroundColor = "#6588C7";
}
var li_elements = document.getElementById('sidebar').getElementsByTagName('li');
for (var i = 0; i < li_elements.length; i++) {
li_elements[i].addEventListener('mouseover', changeColor);
}
</script>
But a simpler solution is to remove the JavaScript and to just do it with CSS :
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width: 100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
#sidebar li:hover {
color: #fff;
background-color: #6588C7;
}
<div id="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
</ul>
</div>

Toggling an element with JQuery makes part of the parent element dissapear

I'm trying to make a nav bar with jquery, fairly simple, clicking the nav icon brings up a menu on the side, however I need a sub-menu to appear after clicking one of the options, in this case the "equipment we sell" tab. I have no problem with that as I click the tab and it toggles the menu to being visible however, all of the tabs below it become invisible (I'm assuming they don't relocate to below the now visible element). Can someone explain to me why the tabs do not make room for the new list elements. Code below.
jscript
$('.icon-menu').click(function() {
$('.menu').animate({
right: '0px'
}, 200);
$('.equipsell').hide();
});
$('.menu-exit').click(function() {
$('.menu').animate({
right: '-285px'
}, 200);
$('.equipsell').hide();
});
$('.equipment').click(function() {
$('.equipsell').toggle();
});
HTML
<header>
<div class="menu">
<img src="img/menu-exit.png" class="menu-exit" alt="Exit Button">
<ul>
<li>Home</li>
<li>About</li>
<li class="equipment">Equipment We Sell</li>
<div class="equipsell">
<li>Audiometers by Inventis</li>
<li>Middle Ear Analyzers by Inventis</li>
<li>Delfino Video Otoscopes by Inventis</li>
<li>Daisy by Inventis</li>
<li>Trumpet REM by Inventis</li>
</div>
<li>Contact Us</li>
</ul>
</div>
<div class="main-menu">
<p>Test<br>Website</p>
<img src="img/bars.jpg" class="icon-menu" alt="Menu">
</div>
</header>
So when you click the equipment class/list item from above it lowers down the "menu" class but covers up the contact us list item.
EDIT
Forgot to include css.
CSS
/***** NAV *****/
header {
background-color: #093;
padding-bottom: 5px;
}
header p {
display: inline-block;
font-size: 1.35em;
margin: 10px 0 5px 15px;
font-weight: bold;
padding: 2px;
border: 3px solid black;
}
header a {
color: black;
}
.icon-menu {
width: 35px;
height: 35px;
float: right;
margin: 20px 15px 0 0;
display: inline-block;
}
.menu {
background: #00882B;
right: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu-exit {
width: 35px;
height: 35px;
margin-left: 48%;
}
.menu ul {
border-top: 1px solid #636363;
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636363;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
color: #000000;
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
}
.menu a {
color: #000000;
font-size: 15px;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
}
.active-menu{
position: absolute;
}
.equipsell{
width: 285px;
position: fixed;
}
.equipsell li {
margin: 0;
padding: 0;
line-height: 2.5;
background-color: #c90;
}
.equipsell a{
color: white;
padding: 0;
margin: 0;
}
.bottom-half li {
background-color: #00882B;
}
/***************/

Your class .equipsell is defining the position to be fixed, which causes is to be placed a layer above the other elements.
I guess the code to create the expected result would be:
.equipsell{
width: 285px;
}
JSFiddle updated: https://jsfiddle.net/rc8br5oe/
More about the CSS positions: http://www.w3schools.com/cssref/pr_class_position.asp

Swap div information from tabbed selection?

I am attempting to make a tabbed "table" of sorts but I am having trouble making it display the information.
$(document).ready(function() {
$('#orenk ul a').click(function() {
$('#orenk ul a').removeClass('selected');
$(this).addClass('selected');
$('#orenk_changer').html(
('.' + $(this).attr('id') + '_content').html()
);
});
});
body,
html,
div,
ul,
li,
a {
margin: 0;
padding: 0;
}
body {
font-family: arial;font-size:12px; color:#222;}
.clear {
clear: both;
}
a img {
border: none;
}
ul {
list-style: none;
position: relative;
z-index: 2;
top: 1px;
border-left: 1px solid #f5ab36;
}
ul li {
float: left;
width: 12.5%;
}
ul li a {
background: #ffd89b;
color: #222;
display: block;
padding: 6px 0px;
text-decoration: none;
border-right: 1px solid #f5ab36;
border-top: 1px solid #f5ab36;
border-right: 1px solid #f5ab36;
text-align: center;
}
ul li a.selected {
border-bottom: 1px solid #fff;
color: #344385;
background: #fff;
}
h1 {
display: block;
width: 600px;
margin: 0 auto;
padding: 20px 0;
color: #fff;
}
#orenk {
width: 900px;
margin: 0 auto;
}
#tabs {
width: 900px;
margin: 0 auto;
}
#content {
width: 900px;
margin: 0 auto;
height: 270px;
background: #fff;
z-index: 1;
text-align: center;
margin-bottom: 20px;
}
<div class="titlebg" style="padding: 4px; text-align: left; font-size: 20px;">
ORENK PROVINCE
</div>
<div id="orenk">
<ul>
<li>ORENK PROVINCE
</li>
<li>Glass Shores
</li>
<li>Torrid Terrain
</li>
<li>Muculent Plains
</li>
<li>Ambrosial Marsh
</li>
<li>Viscid Expanse
</li>
<li>Opulent Retreat
</li>
<li>Reedy Knolls
</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<div id="orenk_changer">
<img src="http://placehold.it/900x270">
</div>
<div id="glass_content" style="display: none;">Glass content test</div>
<div id="torrid_content" style="display: none;">torrid content test</div>
<div id="plains_content" style="display: none;">plains content test</div>
<div id="marsh_content" style="display: none;">marsh content test</div>
<div id="expanse_content" style="display: none;">expanse content test</div>
<div id="Opulent_content" style="display: none;">opulent content test</div>
<div id="knolls_content" style="display: none;">knolls content test</div>
</div>
I am VERY new to javascript and I can get it to display the id where I want the content but when I attempt to get it to show the html inside the container I am trying to call, it does nothing. It's incredibly frustrating. Any one care to point out what I am doing wrong and how to fix it?

jsBin demo
Two things wrong with your ('.' +
$('.' + ›missing $
$('#' + ›you need to target # (Id) elements, not .(class)
$('#orenk ul a').click(function( evt ) {
evt.preventDefault();
$('#orenk ul a').removeClass('selected');
$(this).addClass('selected');
$('#orenk_changer').html(
$('#'+ this.id +'_content').html() // missing $ and # instead of .
);
});
Also, a href="#" (instead of a href="javascript:void(0);") is quite enough if than inside JS you do Event.preventDefault()