Develop Reference

How do I make it so only one element is shown at once?

When the box is clicked on the insides for each of the boxes are shown, I only want one to show up at a time.
function select() {
const outside = document.querySelectorAll('.box')
const insides = document.querySelectorAll('.insides')
insides.forEach(insides => {
outside.forEach(box => {
box.addEventListener('mouseenter', (e) => {
box.setAttribute("id", "selected")
box.addEventListener('click', (e) => {
box.classList.add('hover')
if (document.getElementById('selected')) {
insides.classList.add('insidesHover')
}
})
})
box.addEventListener('mouseleave', (e) => {
box.classList.remove('hover')
box.setAttribute('id', 'testBox')
insides.classList.remove('insidesHover')
})
})
})
}
function newOption() {
var optionRow = document.createElement("div");
optionRow.setAttribute("class", "answers");
optionRow.setAttribute("id", "optionRow");
var option = document.createElement("input");
option.setAttribute("type", "radio");
option.setAttribute("name", "options");
option.setAttribute("id", "options");
var optionBox = document.createElement("div");
optionBox.setAttribute("class", "answerContainer")
optionBox.setAttribute("id", "optionBox")
var text = document.createElement("input");
text.setAttribute("type", "text");
text.setAttribute("name", "option");
text.setAttribute("id", "option");
text.setAttribute("placeholder", "Enter Option");
optionBox.append(optionRow);
optionRow.append(option);
optionRow.append(text);
document.getElementById("selected").append(optionRow);
array()
}
.testContainer {
width: 50%;
margin-left: 25%;
margin-top: 1%;
padding: 1%;
background-color: #333;
height: auto;
color: white;
}
.box {
background-color: white;
color: black;
padding: 25px;
border: 5px blue solid;
}
.hover {
border: #780119 5px solid;
}
.insides {
display: none;
}
.insidesHover {
display: flex;
}
.buttons {
display: none;
}
.buttonsHover {
display: flex;
height: 25px;
width: 25px;
border: 1px solid black;
border-radius: 100%;
}
<div class="testContainer">
<div class="box">
<div class="insides" id="testBox">
<input type="text" class="insidesHover">
<button onclick="newOption()" class="buttonsHover"> </button>
</div>
</div>
</div>
<div class="testContainer">
<div class="box">
<div class="insides" id="testBox">
<input type="text" class="insidesHover">
<button onclick="newOption()" class="buttonsHover"> </button>
</div>
</div>
</div>
<div class="testContainer">
<div class="box">
<div class="insides" id="testBox">
<input type="text" class="insidesHover">
<button onclick="newOption()" class="buttonsHover"> </button>
</div>
</div>
</div>
So the problem I am having is that I want to use a querySelectorAll() for the class of .box, which on click changes the outline to show it is being selected. Which is something that is fully functional and works. However, I also want it to show the inside pieces on click as well but only for one box at a time, which on the event listener of leave will disappear again. Once the inside of adding new options goes away, I need the options that were put in to stay. I have tried putting everything in one div class where the opacity is set to 0, but it makes it so the new options don't stay visible. I have also tried rearranging the variables so that the insides are affected first, which had no effect on the actual functionality. I believe the true issue lies in the fact that when the id, selected, is active it triggers all boxes to be active instead of individual ones. I am not entirely sure how to go about rectifying this issue and would like some advice on moving forward. If you have any questions or if something needs clarification please let me know! Thank you for your time and wish you all a good day!

Is there a way to change a function by clicking on different divs?

I just started school, and this is my first question ever asked on Stackoverflow, so I apologize up front regarding both formatting and wording of this question.
I want to change the border color of my div to a style I have already declared when I click on it. To show that this has been selected.
I have three divs with id="red/green/pink".
Now, is there a way to change this function to grab information from the div I clicked, so I dont have to write 3 (almost) identical functions?
.chosenBorder{
border: 3px solid gold;
}
<div id="red" class="mainDivs" onclick="newColor('red')">Red?</div>
<div id="green" class="mainDivs" onclick="newColor('green')">Green?</div>
<div id="pink" class="mainDivs" onclick="newColor('pink')">Pink?</div>
<div class="mainDivs" onclick="whatNow(changeBig)">Choose!</div>
<script>
let changeBig = "";
let chosenDiv = document.getElementById("body");
function newColor(thisColor) {
changeBig = thisColor;
// something that make this part dynamic.classList.toggle("chosenBorder");
}
function whatNow(changeBig) {
document.body.style.backgroundColor = changeBig;
}
</script>

Since you already have an id contains the name of color; get the advantage of it: and keep track of the selected color in your variable changeBig.
let changeBig = "";
function newColor(div) {
// initial all divs to black
initialDivs();
div.style.borderColor = div.id;
changeBig = div.id;
}
function initialDivs() {
[...document.querySelectorAll('.mainDivs')].forEach(div => {
div.style.borderColor = 'black'
});
}
function whatNow() {
document.body.style.backgroundColor = changeBig;
}
.mainDivs {
padding: 10px;
margin: 10px;
border: 3px solid;
outline: 3px solid;
width: fit-content;
cursor: pointer;
}
<div id="red" class="mainDivs" onclick="newColor(this)">Red?</div>
<div id="green" class="mainDivs" onclick="newColor(this)">Green?</div>
<div id="pink" class="mainDivs" onclick="newColor(this)">Pink?</div>
<div class="mainDivs" onclick="whatNow()">Choose!</div>

There are a few (modern) modifications you can make to simplify things.
Remove the inline JS.
Use CSS to store the style information.
Use data attributes to store the colour rather than the id.
Wrap the div elements (I've called them boxes here) in a containing element. This way you can use a technique called event delegation. By attaching one listener to the container you can have that listen to events from its child elements as they "bubble up" the DOM. When an event is caught it calls a function that 1) checks that the event is from a box element 2) retrieves the color from the element's dataset, and adds it to its classList along with an active class.
// Cache the elements
const boxes = document.querySelectorAll('.box');
const container = document.querySelector('.boxes');
const button = document.querySelector('button');
// Add a listener to the container which calls
// `handleClick` when it catches an event fired from one of
// its child elements, and a listener to the button to change
// the background
container.addEventListener('click', handleClick);
button.addEventListener('click', handleBackground);
function handleClick(e) {
// Check to see if the child element that fired
// the event has a box class
if (e.target.matches('.box')) {
// Remove the color and active classes from
// all the boxes
boxes.forEach(box => box.className = 'box');
// Destructure the color from its dataset, and
// add that to the class list of the clicked box
// along with an active class
const { color } = e.target.dataset;
e.target.classList.add(color, 'active');
}
}
function handleBackground() {
// Get the active box, get its color, and then assign
// that color to the body background
const active = document.querySelector('.box.active');
const { color } = active.dataset;
document.body.style.backgroundColor = color;
}
.boxes { display: flex; flex-direction: row; background-color: white; padding: 0.4em;}
.box { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border: 2px solid #dfdfdf; margin-right: 0.25em; }
button { margin-top: 1em; }
button:hover { cursor: pointer; }
.box:hover { cursor: pointer; }
.red { border: 2px solid red; }
.green { border: 2px solid green; }
.pink { border: 2px solid pink; }
<div class="boxes">
<div class="box" data-color="red">Red</div>
<div class="box" data-color="green">Green</div>
<div class="box" data-color="pink">Pink</div>
</div>
<button>Change background</button>

replace element, nested elements tag type javascript/jquery

I have a <div> wrapped around a set of nested <div> elements; I'd like to present this as a drop-down menu. The element is part of a plugin I'm using on a WordPress website but this should still be adjustable using custom script.
I would like to replace the encasing div with a <ul>, and turn all of the inner <div>s into <li> elements, so I can show this as a drop-down. Either that or a <select>, with nested <option> tags.
Is there a way I can change the HTML tag type , or replace the div, using pure JavaScript, or jQuery?
From:
<div class="slots">
<div class="availableslot"></div>
<div class="availableslot"></div>
</div>
to:
<ul class="slots">
<li class="availableslot"></li>
<li class="availableslot"></li>
</ul>
or:
<select class="slots">
<option class="availableslot"></option>
<option class="availableslot"></option>
</select>
The isolated code: https://codepen.io/bolti95/pen/rNpMdJx
//div into list
const slots_list = document.createElement("ul");
var slots = document.getElementsByClassName("slots")
console.log(slots)
slots.insertBefore(slots_list, slots.children[0])
.slots {
width: 100% !important;
height: max-content;
border: none !important;
box-shadow: none !important;
margin: auto;
}
.slots div a {
color: #77635A;
background: none !important;
}
.slots div a:hover {
background-color: #F7F7F7 !important;
transition: 0.6s;
}
.availableslot {
width: 120px;
height: 55px;
border-radius: 30px;
margin-bottom: 25px;
margin: 10px;
border: none !important;
border-width: 0px;
text-align: center;
font-size: 20px !important;
background-color: #EFE8DA;
color: #77635A;
}
.availableslot a {
margin: 10px;
}
.availableslot:hover {
outline: 1px solid #5FDEAB;
background-color: #F7F7F7;
transition: 0.6;
}
.availableslot a:hover {
background-color: #F7F7F7;
color: #5FDEAB;
transition: 0.6s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="slots">
<span>03/22/2022</span>
<br>
<div class="availableslot"><a>11:00</a></div>
<div class="availableslot"><a>12:00</a></div>
<div class="availableslot"><a>13:00</a></div>
<div class="availableslot"><a>14:00</a></div>
<div class="availableslot"><a>15:00</a></div>
</div>
</body>
</html>

To convert the .availableslot div elements to a ul/li list you can use a combination of wrapAll() and replaceWith(), like this:
$('.availableslot').wrapAll('<ul class="slots" />').replaceWith(function() {
return `<li class="availableslot">${this.innerHTML}</li>`
});
$('.availableslot').wrapAll('<ul class="slots" />').replaceWith(function() {
return `<li class="availableslot">${this.innerHTML}</li>`
});
.slots {
width: 100% !important;
height: max-content;
border: none !important;
box-shadow: none !important;
margin: auto;
}
.slots div a {
color: #77635A;
background: none !important;
}
.slots div a:hover {
background-color: #F7F7F7 !important;
transition: 0.6s;
}
.availableslot {
width: 120px;
height: 55px;
border-radius: 30px;
margin-bottom: 25px;
margin: 10px;
border: none !important;
border-width: 0px;
text-align: center;
font-size: 20px !important;
background-color: #EFE8DA;
color: #77635A;
}
.availableslot a {
margin: 10px;
}
.availableslot:hover {
outline: 1px solid #5FDEAB;
background-color: #F7F7F7;
transition: 0.6;
}
.availableslot a:hover {
background-color: #F7F7F7;
color: #5FDEAB;
transition: 0.6s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slots">
<span>03/22/2022</span>
<br>
<div class="availableslot"><a>11:00</a></div>
<div class="availableslot"><a>12:00</a></div>
<div class="availableslot"><a>13:00</a></div>
<div class="availableslot"><a>14:00</a></div>
<div class="availableslot"><a>15:00</a></div>
</div>
The same technique can be used to convert them to a select/option form control:
$('.availableslot').wrapAll('<select />').replaceWith(function() {
let time = this.querySelector('a').innerText;
return `<option value="${time}">${time}</option>`;
});
$('.availableslot').wrapAll('<select />').replaceWith(function() {
let time = this.querySelector('a').innerText;
return `<option value="${time}">${time}</option>`;
});
.slots {
width: 100% !important;
height: max-content;
border: none !important;
box-shadow: none !important;
margin: auto;
}
.slots div a {
color: #77635A;
background: none !important;
}
.slots div a:hover {
background-color: #F7F7F7 !important;
transition: 0.6s;
}
.availableslot {
width: 120px;
height: 55px;
border-radius: 30px;
margin-bottom: 25px;
margin: 10px;
border: none !important;
border-width: 0px;
text-align: center;
font-size: 20px !important;
background-color: #EFE8DA;
color: #77635A;
}
.availableslot a {
margin: 10px;
}
.availableslot:hover {
outline: 1px solid #5FDEAB;
background-color: #F7F7F7;
transition: 0.6;
}
.availableslot a:hover {
background-color: #F7F7F7;
color: #5FDEAB;
transition: 0.6s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slots">
<span>03/22/2022</span>
<br>
<div class="availableslot"><a>11:00</a></div>
<div class="availableslot"><a>12:00</a></div>
<div class="availableslot"><a>13:00</a></div>
<div class="availableslot"><a>14:00</a></div>
<div class="availableslot"><a>15:00</a></div>
</div>

One approach, using plain JavaScript, is below; explanatory comments are in the code:
// creating a named function, using Arrow syntax, that allows the user to pass in an
// Object of updated preferences:
const replaceWith = (opts) => {
let settings = {
// String, sets the element-type to replace the outer wrapper:
outerTo: 'select',
// String, sets the element-type to replace the inner wrapper:
innerTo: 'option',
// String, CSS selector to select the relevant elements:
source: '.slots',
// Boolean, true: replaces the element when its replacement is inserted into the document,
// false: hides the element when its replacement is inserted into the document:
replace: true,
// Boolean, true: preserves the child-nodes of the inner-elements being replaced,
// false: preserves the text-content of the inner-element, but does not
// keep the child-nodes that may have contributed text:
preserveHTMLChildren: false,
};
// while I'm sure there's an easy way to use destructruring to avoid this step, I chose to
// use this approach, wherein we take the keys of the opts Object passed to the function
// or - if no Object is passed - we look at the empty Object-literal (to avoid errors),
// we then iterate over the Array of Object-keys using Array.prototype.forEach(), again
// using Arrow syntax:
Object.keys(opts || {}).forEach(
// the 'key' passes in a reference to the current key of the Array of Object-keys
// over which we're iterating, and in the function we set the Object-key of the
// settings Object to the value of the opts Object key-value:
(key) => settings[key] = opts[key]
);
// to reduce unnecessary typing, we alias the document to the D variable:
let D = document,
// we create an element according to the desired elements:
outer = D.createElement(settings.outerTo),
inner = D.createElement(settings.innerTo),
// we use document.querySelectorAll(), using the supplied, or default,
// CSS selector, to retrieve all matching elements:
sources = [...D.querySelectorAll(settings.source)];
// we use NodeList.prototype.forEach() to iterate over the NodeList of matching
// elements returned to the sources variable:
sources.forEach(
// using Arrow syntax we pass in a reference to the current Node ('source') of
// the NodeList:
(source) => {
// we clone the created-element for the outer-element's replacement:
let outerClone = outer.cloneNode();
// we copy the classList:
outerClone.classList = source.classList;
// we use an Array-literal with the spread syntax to create an Array of
// the child-nodes of the current 'source', and then iterate over that
// Array of Nodes using Array.prototype.forEach():
[...source.children].forEach(
// we pass in a reference to the current child-element of the parent
// 'source', in the variable named 'child':
(child) => {
// we clone the created-element for the inner element:
let innerClone = inner.cloneNode();
// if settings.preserveHTMLChildren is exactly equal to Boolean true:
if (settings.preserveHTMLChildren === true) {
// while there is a firstChild node (whether comment, text, HTMLElement...):
while (child.firstChild) {
// we copy that firstChild Node accross to the innerClone element:
innerClone.append(child.firstChild);
}
} else {
// we update the text-content of the innerClone to be equal to the
// original text-content:
innerClone.textContent = child.textContent;
}
// copying the classList of the existing child to the innerClone:
innerClone.classList = child.classList;
// we append the current innerClone to the outerClone:
outerClone.append(innerClone);
});
// we then access the current 'source' element's parentNode, and
// use ParentNode.insertBefore() to insert the newly-created
// outerClone before the current 'source' element's next-sibling
// (effectively inserting it after the current 'source' element):
source.parentNode.insertBefore(outerClone, source.nextSibling);
// if the user wants to replace the element, so settings.replace is
// exactly-equal to (Boolean) true:
if (settings.replace === true) {
// we remove the current 'source' element, using Node.remove():
source.remove();
} else {
// otherwise we set source.hidden to 'true' to hide the element
// using the 'hidden' HTML attribute (though in the demo I chose
// to modify the opacity to show that the element does, in fact,
// remain in the document); this should probably be modified when
// in use:
source.style.opacity = 0.4;
// source.hidden = true;
}
})
};
// calling the function:
replaceWith({
// using a non-default CSS Selector:
source: '#demo1'
});
// calling the functiona again:
replaceWith({
// modifying the CSS selector again:
source: '#demo2',
// using a <ul> to 'replace' the outer element:
outerTo: 'ul',
// using an <li> to wrap the inner contents:
innerTo: 'li',
// setting Boolean false, to not replace the original
// element(s), so inserting the new element(s) and hiding
// the original(s):
replace: false,
});
replaceWith({
source: '#demo3',
outerTo: 'ul',
innerTo: 'li',
// setting preserveHTMLChildren to true means the <span> elements
// contained within the inner-<div> elements will be preserved when
// the HTML is modified:
preserveHTMLChildren: true,
});
replaceWith({
source: '#demo4',
// again, setting preserveHTMLChildren to true means the <span> elements
// contained within the inner-<div> elements will be preserved when
// the HTML is modified; but while those <span> elements may be present
// in the DOM (in FF 98/Ubuntu 21.10), they are not styled by the CSS
// (and an <option> element has no valid child-elements), so this isn't
// necessarily going to be respected by the browser:
preserveHTMLChildren: true,
});
*,
::before,
::after {
box-sizing: border-box;
font: normal 400 1rem / 1.5 sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
}
.slots {
border: 1px solid palegreen;
margin: 1em auto;
padding: 0.5em;
width: 20rem;
}
.slots:not([id]) {
border: 1px solid rebeccapurple;
}
.slots span {
color: #f90;
}
<div id="demo1" class="slots">
<div class="availableslot">available 1</div>
<div class="availableslot">available 2</div>
</div>
<div id="demo2" class="slots">
<div class="availableslot">available 3</div>
<div class="availableslot">available 4</div>
</div>
<div id="demo3" class="slots">
<div class="availableslot">available <span>5</span></div>
<div class="availableslot">available <span>6</span></div>
</div>
<div id="demo4" class="slots">
<div class="availableslot">available <span>7</span></div>
<div class="availableslot">available <span>8</span></div>
</div>
JS Fiddle demo.
I have to admit that I'm curious as to why the <select> elements aren't being positioned correctly (in terms of margin-inline: auto), but that's a problem for another time.
If there are any questions then please don't hesitate to leave a comment below.
References:
Array.prototype.forEach().
Array literals [ /*...*/ ].
Arrow functions.
document.createDocumentFragment().
document.createElement().
document.querySelectorAll().
Element.children().
Element.classList.
Element.remove().
Node.cloneNode().
Node.firstChild.
Node.insertBefore().
Node.parentNode.
NodeList.prototype.forEach().
Object.keys().
Spread syntax ....
while (...) {...} statement.

<li> element toggle between different background colors

I want to change the background color of the button based upon the class. Why it is not going back after second click?
var $begin1 = $(".begin1").click(function(e) {
e.preventDefault();
var buttonState = $(this).attr("class");
if (buttonState != 'pressed') {
$begin1.removeClass('pressed');
$(this).addClass('pressed');
} else {
$(this).removeClass('pressed');
$(this).addClass('unpressed');
}
});
li {
list-style-type: none;
}
.begin1.unpressed,
.begin2.unpressed {
background-color: white;
color: black;
border: 2px solid #4CAF50;
margin: 0 0 10px 0;
}
li.begin1.pressed,
li.begin2.pressed {
background: #4CAF50;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="begin1 unpressed">
<h2>Button</h2>
</li>
https://jsfiddle.net/nrebaL00/

You can simplify your code greatly. Apply the default styling from the beginning and you don't need an .unpressed class.
The issue with using .attr( 'class' ) is that it will retrieve all the classes applied to the element as a string. Performing a check like if ( 'a' === $el.attr( 'class' ) ) won't work where $el is <li class="a b c"> as $el.attr( 'class' ) would return 'a b c' and not 'a'. Which is why your check was failing after the first click. This kind of check would be good for .hasClass().
e.prevendDefault() is not required for an <li>, so remove that.
Note: the selector I used for jQuery is pretty generic. You may need to increase it's specificity if there are other <li> on the page that don't require the functionality. Something along the lines of adding a class to the <ul> and using that as the part of the jQuery selector. i.e. <ul class="clicky-mcclickens"> and $( '.clicky-mcclickens li' ).
$('li').on('click', function(e) {
$(this).toggleClass('pressed');
});
li {
list-style-type: none;
background-color: white;
color: black;
border: 2px solid #4CAF50;
margin: 0 0 10px 0;
}
.pressed {
background: #4CAF50;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<h2>Button 1</h2>
</li>
<li>
<h2>Button 2</h2>
</li>
</ul>
Sometimes you need more control than simply adding/removing a class when an element is clicked. In those instances you can use .hasClass() to check if the element has the class in question and apply the appropriate action.

Your code is much more complex than it needs to be; you can just call toggleClass() like this:
var $begin1 = $(".begin1").click(function() {
$(this).toggleClass('pressed unpressed');
});
Updated fiddle
Note that e.preventDefault() is redundant for an li element as it has no default behaviour to prevent.

I would use toggleClass instead of adding and removing manually. This seems to work:
var $begin1 = $(".begin1").click( function(e) {
$begin1.toggleClass('pressed');
});

Instead of check the complete string of the class of the element you can check if the element has specific class using hasClass:
var $begin1 = $(".begin1").click( function(e) {
e.preventDefault();
if(!$(this).hasClass('pressed')){
$begin1.removeClass('unpressed');
$(this).addClass('pressed');
} else{
$(this).removeClass('pressed');
$(this).addClass('unpressed');
}
});
li{
list-style-type: none;
}
.begin1.unpressed,
.begin2.unpressed {
background-color: white;
color: black;
border: 2px solid #4CAF50;
margin: 0 0 10px 0;
}
li.begin1.pressed,
li.begin2.pressed{
background: #4CAF50;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="begin1 unpressed"><h2>Button</h2></li>
The problem with using the attr('class') is that you can't know what exactly will be the final string.

Just replace your js with:
$(document).ready(function() {
$(".begin1").click(function(){
$(this).toggleClass("pressed");
});
});

jquery-ui : drop&drag inventory with stackable items

Hello everyone,
I'm building a drop&drag inventory panel for my webgame, but I was unable to make it work with stackable elements. I have simplified the whole inventory so that it's less confusing.
FIrst off, let me explain how do I expect it to work:
Every .item element can be dropped on any free .inv_slot.
If I try to drop an .item element on another .item that does not contain class .stackable, it will simply activate the draggable's revert() function.
if I try to drop the .item element on an .item that does have the .stackable class,
it will only remove the clone/helper. (Later on I will addd an function that only increases the items stack size.)
Now what's wrong with the below example :
in case an .item accidentally dropped on border or between two .inv_slotslots, the Revert animation is not activated. It does work however, while dropping the .item element outside the #panel.
Also if I accidentally dropped an .item between two .inv_slot elements, it will behave as if the .item was dropped on a .stackable item. So it will remove the clone instead of reverting back to it's prev. position. (Most likely an issue with the selector in drop: method)
If I drop a .stackable item over another .stackable item, it does not refresh the cursor. It seems to be stuck in the drag mode which activates the "pointer" cursor.
Now here's the (partialy working) example:
$(document).ready(function() {
//var prev_el = '';
var item_isStackable = "";
$( ".item").draggable({
scroll: true,
revert: function(isValidEl)
{
if(isValidEl)
{
return false;
}else{
return true;
}
},
helper: "clone",
cursor: "pointer",
stack: false,
zIndex: 27,
drag: function(event, ui)
{
item_isStackable = $(this).hasClass("stackable");
},
});
$( ".inv_slot" ).droppable({
accept: ".item",
drop: function( event, ui ) {
var item = $(this).find(".item");
if(item.length == 0) /// See if there any items already in the currently selected inventory slot //
{
console.log("Inserting");
ui.draggable.detach().appendTo($(this)); // if none, insert the item into athe free slot ///
}
else if(item_isStackable == true && item.hasClass("stackable")){
console.log("Increasing ");
ui.draggable.detach(); /// If yes, just destroy the clone ///
}else{
console.log("reverting back");
// in case it's not .inv_slot , revert the item back to it's previous position //
ui.draggable.animate(ui.draggable.data().origPosition,"slow");
}
}
});
});
#panel
{
width: 340px;
height: 44px;
border: 1px solid #000;
padding: 4px;
}
.inv_slot
{
z-index: 22;
position: relative;
width: 40px;
height: 40px;
border: 1px solid red;
float: left;
}
.inv_slot .slot_pos{
z-index: 24;
position: absolute;
margin-left: 50%;
left: -4px; top: 2px;
}
.item
{
position: relative;
z-index: 25;
margin: 4px;
width: 30px;
height: 30px;
border: 1px solid blue;
}
.item.stackable
{
border: 1px solid green;
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="panel">
<div class="inv_slot">
<div class="item stackable" ></div>
<span class="slot_pos">0</span>
</div>
<div class="inv_slot">
<div class="item"> </div>
<span class="slot_pos">1</span>
</div>
<div class="inv_slot">
<div class="item stackable"> </div>
<span class="slot_pos">2</span>
</div>
<div class="inv_slot"><span class="slot_pos">3</span> </div>
<div class="inv_slot"><span class="slot_pos">4</span> </div>
<div class="inv_slot"><span class="slot_pos">5</span> </div>
<div class="inv_slot"><span class="slot_pos">6</span> </div>
<div class="inv_slot"><span class="slot_pos">7</span> </div>
</div>
I have spent couple of hours without any progress , so I'd really appreciate if someone could help me out with this one.
Thanks in advance,
Alex.

What's happening is that when you drag a box onto a border next to it, it deletes itself because it tries to stack itself. You need to change the second part of your if statement:
else if(item_isStackable == true && item.hasClass("stackable") && ui.draggable.filter(function() { var d = this; return item.filter(function() { return d == this; }).length > 0; }).length === 0)
To fix the cursor pointer problem:
.item
{
position: relative;
z-index: 25;
margin: 4px;
width: 30px;
height: 30px;
border: 1px solid blue;
cursor: default !important; /* Add this property. */
}
Fiddle.