I have a task at work where I must implement a simple browser-based chat system for an intranet. Backend is ready, and now I'm trying to create the UI part but it's giving me a big headache, and been banging my head against the desk for hours because of this :(
Here's my JSFiddle: http://jsfiddle.net/2PMvM/ (it uses JQuery + JQueryUI - 1.x)
The HTML, semantically, looks right, but it doesn't work as good as it looks. The idea is that the window (red border div) should contain all of its elements. I don't know why the list's horizontal scrollbar and then my textarea get out of the window, as if there's some offset I'm not taking into account?
I'm trying to do this with the least JS possible, but if the CSS way is too complicated, I'm willing to take a JS solution then.
What could be wrong though?. Thanks in advance :)
--- SO requires me to put the code, so here it goes:
Note: be sure to include this JS: https://github.com/AndrewDryga/jQuery.Textarea.Autoresize/raw/master/js/jquery.textarea.autoresize.js because it is required so my textarea autosizes when it gets more text. The window should contain the textarea even if it resizes. Seems like CSS could do it, but no?
IT IS SOLVED!! Thanks to #Trevor: Here's the updated code + Fiddle HERE. Thanks!
HTML:
<div class="window">
<div style="height: 20px;" class="wndHandle">Some username :D</div>
<div class="content" id="chatDiv" style="background:#fff;overflow: scroll;">
<ul class="ulChat">
<li class="msg in">Test message for testing 1</li>
<li class="msg out">Test message for testing 2</li>
<li class="msg out">Test message for testing 3</li>
<li class="msg in">Test message for testing 4</li>
</ul>
</div>
<div class="footer">
<textarea style="width: 100%; resize: none; overflow-x: hidden;" rows="1" cols="1"></textarea>
</div>
</div>
CSS:
.ui-resizable-handle
{
background: #f5dc58; border: 1px solid #FFF;
width: 9px; height: 9px;
z-index: 2;
}
.ui-resizable-se { right: -5px; bottom: -5px; }
.window
{
position: absolute;
display: inline-block;
width: 150px;
height: 200px;
border: 1px solid #bb0000;
}
.wndHandle {
cursor: move;
font-size: 9pt;
background: #888;
color: #fff;
padding-left: 1px;
}
Javascript:
var refresh = function() {
var objWindow = $('.window');
var objHandle = objWindow.find('.wndHandle');
var objContent = objWindow.find('.content');
var objFooter = objWindow.find('.footer');
var objResize = objWindow.find(".ui-resizable-handle.ui-resizable-se");
objResize.removeClass("ui-resizable-autohide");
objContent.height(
objWindow.innerHeight() -
objHandle.outerHeight() -
(
(objFooter.length == 0) ?
(objResize.length == 0) ? 0 : objResize.outerHeight()
: objFooter.outerHeight()
)
);
}
$('.window').draggable({ handle: '.wndHandle' }).resizable({
handles: 'se',
minWidth: 150,
minHeight: 100,
resize: function( event, ui ) {
refresh();
}
});
$('textarea').autoresize({
maxHeight: 80,
onResize: function () {
refresh();
}
});
refresh();
Here is a solution using jQuery to adjust the height
HTML - added ID
...
<div id="chatDiv" style="background:#fff;overflow: scroll;">
...
jQuery
$('.window').draggable({ handle: '.wndHandle' }).resizable({
handles: 'se',
minWidth: 150,
minHeight: 100,
resize: function( event, ui ) {
$('#chatDiv').height($('.window').height()-38);
}
});
$('#chatDiv').height($('.window').height()-38);
$('textarea').autoresize();
Fiddle
Related
I been struggling with this all morning and I can't seem to figure out what the issue is. On my page I have a draggable text field. (It has a static ID for testing purposes when you first drag it to the canvas as "item-text-1")
When I first drag the item down in the console log you can clearly see a "1" being outputed from the $("#item-text-1").data("test") however as you continue to drag it around a few times, it will start to go to "undefined" for some reason and I have absolutely no idea how to fix this. I tried doing ui.helper.detached() then also removed that all together and I'm just lost at this point.
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$( function() {
function setDraggable(el, doClone) {
el.draggable({
helper: doClone ? 'clone' : "original"
});
}
$(".pages").droppable({
accept: ".draggable",
drop: function( event, ui ) {
cloned = ui.helper.clone();
cloned.removeClass('ui-resizable');
var applyData = false;
if (ui.draggable.hasClass('cloned') == false) {
applyData = true;
console.log("this is a clone!");
cloned.addClass('cloned');
}
cloned.find(".ui-resizable-handle").remove();
cloned.find(".ui-resizable").remove();
cloned.find("resizable").remove();
cloned.removeClass('ui-resizable');
cloned.resizable().draggable();
setDraggable(cloned, false)
cloned.attr("id", "item-text-1");
$( this )
.append(cloned)
if (applyData == true) {
$("#item-text-1").data("test", "1");
console.log($("#item-text-1").data("test"));
} else {
console.log($("#item-text-1").data("test"));
}
var newTop = $(ui.helper).offset().top - $(this).offset().top;
var newLeft = $(ui.helper).offset().left - $(this).offset().left;
cloned.css("top", newTop);
cloned.css("left", newLeft);
//ui.helper.detach();
}
});
$(".pagesWrapper").droppable({
accept: ".draggable",
drop: function( event, ui ) {
ui.helper.remove();
}
})
setDraggable($(".draggable"), true);
$( "#tab-container" ).tabs();
} );
</script>
</head>
<body style="text-align:center; margin: 0;">
<div id="template-container" style="width: 880px; height: 775px; background-color: #f3f3f3; margin: auto; border: 3px solid #636363; padding: 8px;">
<div id="roles-tabs" style="padding-left: 0px; height: 90px; width: 100%; border-bottom: 1px solid #ddd;">
<div id="button-container" style="float: left; width: 60px; height: 80px; display: block;"> </div>
<div id="tab-container" style="width: 600px; float: left; padding-right: 5px; padding-top: 5px; height: 80px;">
<ul>
<li>Data Fields</li>
</ul>
<div id="tabs-formfields">
<table>
<tbody>
<tr>
<td style="padding-right: 6px;">
<div id="item-textfield" name="item-textfield" class="items-textfield draggable draggable-item" style="width: 100px; height: 30px; cursor: pointer; background-color: black; color: white; z-index: 99999">
<div class="new-textfield-field">
<div class="fake-data">Text Field</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="showPDF" class="pdf-container pagesWrapper" style="z-index: 0; padding-top: 50px; width: 880px; padding-bottom: 50px; height: 515px; overflow-y: auto; background-color: #565656;">
<div style="margin: auto;" class="canvas">
<div id="page1" class="pages" style="position: relative; margin: auto; width: 400px; height: 500px; background-color: white;">
</div><br /><br />
</div>
</div>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
Ok, so here's why the current implementation is not working:
You have two droppable areas:
$(".pages").droppable({
...
and
$(".pagesWrapper").droppable({
When you drag the element the first time, a clone is created by jquery ui and dropped into the page container. Let's say clone "no-id". Then in the page droppable, the "no-id" is again cloned by this
cloned = ui.helper.clone();
...
cloned.attr("id", "item-text-1");
Now you have on the dom two elements "no-id" and "item-text-1".
When you assign the data to the element by id "item-text-1" this data will be assigned to the single element with that id.
After this handler finishes, you have the second droppable handler, that will also perform his logic upon the "no-id" element and remove it from the dom.
ui.helper.remove();
Now you have only one clone remaining : "item-text-1".
When you drag the remaining clone the second time you will create another clone because of the page droppable handler, and you will have two elements with the id "item-text-1".
When you display now the data in the "item-text-1" element, because byId will return the first occurrence, you will see the data set before, in the first drag. The second element has no data attached to it.
When the pagesWrapper droppable will be invoked, then first element with the id "item-text-1" will be removed, and you will only have the last element available in the dom, that does not have the data anymore.
And from here on the data is lost.
In order to preserve the data, you will need to assign it to the new object after you clone the source object:
cloned = ui.helper.clone();
cloned.data('test', ui.helper.data('test'));
In this way you will always have the data with you, but be aware that your text control is always a new one, not the original clone.
I have a UL of DIV's. The when the DIVs are clicked the page should animate slide open displaying information about the topic clicked. This works fine. I have now added code see below, to add a page 2 that will overwrite the divs above with new topics. On page load you can click the divs to see the information. But after selecting next page, when clicking on the divs. nothing happens. For testing i have only rearranged the divs. so i know the id names are the same. I am fairly new at this but i feel as if there may be an easier way to do this. Also i have wondered if in the code to animate the upper and lower div. after its changed would it be upperhidden now? Any help would be appreciated. I feel as if i did a horrible job explaining what to do. but i can provide what ever is needed.
UPDATE:
Thanks. I will try this again. i have a site. that has 2 rows of 3. These are images such as:
password | HMS | pluto
citrix | java | email
button1
say you click password the page opens like below the top row animates up and bottom row animates down and information opens between them
password | HMS | pluto
pw reset info
citrix | java | email
button1
This aspect all works correctly. I have added the code that will replace the top and bottom rows. for testing i have it where the bottom goes to top and vise versa. When button1 is click screen changes like this.
citrix | java| email
password | HMS | pluto
button2
Once at this lay out say you click password it should open to show this
citrix | java | email
PW reset Info
password | HMS | pluto
button2
But this operation is not working. once the items are changed from the jquery code $('#upper').html(jQuery("#upperhidden").html()); when you make a selection the divs do not open to show the information. Note button 2 sets the divs back to as the are on page load. Even going back to main they will not open/raise/lower.
Maybe this explains the question a little better.
Javascript
jQuery(document).ready(function() {
var divClone = $("#upper").clone();
var divClone1 = $("#lower").clone();
$("#button1").hide();
$("#button1").click(function(event) {
$("#car").show();
$("#button1").hide()
$("#upper").replaceWith(divClone.clone());
$("#lower").replaceWith(divClone1.clone());
});
});
jQuery(document).ready(function() {
$("#car").click(function() {
$('#upper').html(jQuery("#upperhidden").html());
$('#lower').html(jQuery("#lowerhidden").html());
$("#car").hide();
$("#button1").show();
});
});
$(function()
{
var closed = true;
$('.password').click(function()
{
if (closed = true)
{
$("#upper").animate({'top' : '-200px'}, {duration: 400});
closed = false;
$("#maininfo").animate({'top' : '200px'}, {duration: 000});
closed = false;
$("#lower").animate({'top' : '400px'}, {duration: 400});
closed = false;
$("#filler").animate({'top' : '400px'}, {duration: 400});
closed = false;
var output = document.getElementById("maininfo");
var sentence = '<h4>PASSWORD RESET</h4>';
var open = true;
output.innerHTML = sentence;
}
else
{
}
});
});
function callShell(){
var objShell = new ActiveXObject("WScript.shell");
objShell.run('rundll32.exe user32.dll,LockWorkStation');
}
CSS
#upper, #lower {
background: #849794;
height: 300px;
position: relative;
z-index: 10;
}
#upper {
/* For IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000');
}
#upper ul {
height: 100%;
padding-top: 35px;
}
#upper ul li {
display: inline-block;
height: 230px;
width: 230px;
margin: 0 auto;
margin-left: 30px;
}
#lower {
background: #849794;
height: 300px;
overflow: hidden;
/* For IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#000000');
}
#lower ul {
height: 100%;
padding-top: 35px;
}
#lower ul li {
display: inline-block;
height: 230px;
width: 230px;
margin: 0 auto;
margin-left: 30px;
}
#filler {
width: 100%;
background: #849794;
height: 400px;
position: relative;
}
.password {
background: url(../images/pr1.png);
background-size: 100%;
}
.password:hover {
background: url(../images/pr2.png);
background-size: 100%;
}
.password:active {
background: url(../images/pr3.png);
background-size: 100%;
}
<div id="main">
<div id="upper">
<ul id="upper1">
<!-- TOP BUTTONS -->
<li class="password"></li>
<li class="enable"></li>
<li class="abstract"></li>
<!-- TOP BUTTONS -->
</ul>
</div>
<div id="upperhidden" style="display:none">
<ul>
<!-- TOP BUTTONS PAGE 2 -->
<li class="abstract"></li>
<li class="citrix"></li>
<li class="password"></li>
<!-- TOP BUTTONS PAGE 2 -->
</ul>
</div>
<div id="maininfo">
</div>
<div id="lower">
<ul id="lower1">
<!-- BOTTOM BUTTONS -->
<li class="threem"></li>
<li class="citrix"></li>
<li class="cerner"></li>
<!-- BOTTOM BUTTONS -->
</ul>
</div>
<div id="lowerhidden" style="display:none">
<ul>
<!-- BOTTOM BUTTONS PAGE 2 -->
<li class="password"></li>
<li class="enable"></li>
<li class="abstract"></li>
<!-- BOTTOM BUTTONS PAGE 2 -->
</ul>
</div>
<div id="filler">
<button id="car">Next Page</button>
<button id="button1">Prev Page</button>
</div>
</div>
the only biggie i see is in the JS code
if (closed = true)
you are missing an =
if (closed == true)
but, yes, there is an easier way to do this without the "UL of DIV's"
use $('.password').on('click', function() { //do stuff here; }); instead of $('.password').click(). the .on('click', ...) function recognizes dynamically added elements to the DOM so the click will register for your newly cloned elements
EDIT - simple demo below http://jsfiddle.net/swm53ran/431/
$(document).ready(function() {
$('.password').on('click', function() {
if ($(this).hasClass('open')) {
$('.content').fadeOut(500);
$('.bottom').animate({ marginTop: "0px" }, { duration: 1500, queue: false } );
$('.top').animate({ marginTop: "0px" }, { duration: 1500, queue: false });
var html = '';
$(this).removeClass('open');
}
else {
$(this).addClass('open');
$('.bottom').animate({ marginTop: "+140px" }, { duration: 1500, queue: false });
$('.top').animate({ marginTop: "-70px" }, { duration: 1500, queue: false });
var html = 'this is the password stuff that goes in this place.';
$('.content').html(html).fadeIn(3000);
}
});
$('.btn1').on('click', function() {
var newtop = $('.top').clone(true).removeClass('top').addClass('bottom');
var newbot = $('.bottom').clone(true).removeClass('bottom').addClass('top');
$('.upper').html('').append(newbot);
$('.lower').html('').append(newtop);
});
});
li {
display: inline-block;
padding: 10px;
border: 1px solid black;
}
.main {
margin-top: 100px;
margin-bottom: 100px;
}
.btnDiv {
display: inline-block;
margin-left: 100px;
}
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="upper">
<ul class="top">
<li class="password">password</li>
<li class="hms">HMS</li>
<li class="pluto">pluto</li>
</ul>
</div>
<div class="content"></div>
<div class="lower">
<ul class="bottom">
<li class="citrix">citrix</li>
<li class="java">java</li>
<li class="email">email</li>
</ul>
</div>
</div>
<div class="btnDiv">
<button class="btn btn1">switch</button>
</div>
I have some code that is meant to allow a user to scroll sideways by clicking, which works perfectly on jsfiddle, but does something completely different on my actual website. On my website, you can scroll right once but no further, and when you scroll back, it apparently scrolls right past the left-hand border.
Here's a live link to the problem on my website: rouvou.com/error
And here's the fiddle.
I literally copied and pasted the code. I'm using jQuery 1.10.0 on my website and the closest jQuery version jsfiddle has is 1.10.1, but I can't imagine that could cause this different behavior. The html I posted is the only code on that entire page. On both locations, I'm using Chrome Version 42.0.2311.152 (64-bit) on Ubuntu.
Why might the code have different results on jsfiddle and my website?
$(document).ready(function() {
var $item = $('div.item'), //Cache your DOM selector
visible = 2, //Set the number of items that will be visible
index = 0, //Starting index
endIndex = ($item.length / visible) - 1; //End index
$('div#arrowR').click(function() {
if(index < endIndex) {
index++;
$item.animate({
'left': '-=300px'
});
}
});
$('div#arrowL').click(function() {
if(index > 0) {
index--;
$item.animate({
'left': '+=300px'
});
}
});
});
#container {
width: 340px;
height: 50px;
}
#list-container {
overflow: hidden;
width: 300px;
float: left;
}
.list {
background: grey;
min-width: 1400px;
float: left;
}
#arrowR {
background: yellow;
width: 20px;
height: 50px;
float: right;
cursor: pointer;
}
#arrowL {
background: yellow;
width: 20px;
height: 50px;
float: left;
cursor: pointer;
}
.item {
background: green;
width: 140px;
height: 40px;
margin: 5px;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
<div class='list'>
<div class='item'>1
</div>
<div class='item'>2
</div>
<div class='item'>3
</div>
<div class="item">4
</div>
<div class='item'>5
</div>
<div class='item'>6
</div>
<div class='item'>7
</div>
<div class="item">8
</div>
</div>
</div>
</div>
It seems just as you said, 1.10.0 has some bug on that. I created an altered version of your jsfiddle, the only difference is that the jQuery is using version 1.10.0, you can see that it works like your site now.
See jQuery 1.10.1 Change log :
Effects
#13937: finish() only finishes last item of a set being .animate()d.
#13939: 1.10.0 breaks relative animation
and the issue ticket#13939 :
Description
Relative animation (using += or -=) is broken in 1.10.0. For example,
$('h1').animate({marginLeft: '+=100px'}); does not work.
So, you might have to switch to version 1.10.x where x is the latest version, as their change should mostly be issue fixes, not functionality changes.
The problem was that there is indeed a bug in 1.10.0, but for anyone in the future who has this problem but doesn't want to upgrade, I figured out a way to make this function work on 1.10.0.
<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
<div class='list'>
<div class='item'>1
</div>
<div class='item'>2
</div>
<div class='item'>3
</div>
<div class="item">4
</div>
<div class='item'>5
</div>
<div class='item'>6
</div>
<div class='item'>7
</div>
<div class="item">8
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var $item = $('div.item'), //Cache your DOM selector
visible = 2, //Set the number of items that will be visible
index = 0, //Starting index
endIndex = ( $item.length / visible ) - 1; //End index
animatepixels = 0
$('div#arrowR').click(function(){
if(index < endIndex ){
index++;
animatepixels = 0 - (index * 300)
$item.animate({'left':animatepixels+'px'});
}
});
$('div#arrowL').click(function(){
if(index > 0){
index--;
animatepixels= 0 - (index * 300)
$item.animate({'left':animatepixels+'px'});
}
});
});
</script>
I need to build inline rating for tv shows for example. Max rating I put in jQuery code, current rating in html document. This is how I found the way to do this.
$(document).ready(function() {
var maxRating = $('.rate-line').width();
var maxRating = 6; //max-rating
var currentRatingFirst = $('.first-rd').text();
var calc = (currentRatingFirst / maxRating) * 100 + "%";
$('.first-rl span.fill').width(calc);
});
.rate-line {
border: 1px solid #bababa;
background: #fff;
position: relative;
vertical-align: middle;
margin-right: 1.25em;
overflow: hidden;
width: 50%;
height: 20px;
}
.rate-line, .rate-data, .fill {
display:inline-block;
}
.fill {
background: #ff6292;
height: 22px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span class="rate-line first-rl">
<span class="fill"></span>
</span>
<span class="rate-data first-rd">4.56</span>
</div>
But, I need to create 6 rating lines for this month, then 6 for next and so on. And every time I must give new unique classes to make it work. And code becomes huge. And one more, all this rating nested to bootstrap carousel items and when I duplicate it nothing works .I'm not good in JavaScript at all and I'm asking your help. Would you please tell me how to make it work correctly and make it easier?
In this case it makes sense to create basin custom plugin, so you can easily reuse it without duplicating code.
Here is a very basic example of how you can extend jQuery prototype with a new method:
$.fn.rating = function(options) {
return this.each(function() {
var maxRating = $(this).find('.rate-line').width();
var maxRating = 6;
var currentRatingFirst = $(this).find('.first-rd').text();
var calc = (currentRatingFirst / maxRating) * 100 + "%";
$(this).find('.first-rl span.fill').width(calc);
});
};
$(document).ready(function () {
$('.rating').rating();
});
.rate-line {
border: 1px solid #bababa;
background: #fff;
position: relative;
vertical-align: middle;
margin-right: 1.25em;
overflow: hidden;
width: 50%;
height: 20px;
}
.rate-line, .rate-data, .fill {
display:inline-block;
}
.fill {
background: #ff6292;
height: 22px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
<span class="rate-line first-rl">
<span class="fill"></span>
</span>
<span class="rate-data first-rd">4.56</span>
</div>
<div class="rating">
<span class="rate-line first-rl">
<span class="fill"></span>
</span>
<span class="rate-data first-rd">3.21</span>
</div>
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.