We Keep Coding

draggable ui that implicate a condition on specific position

I am struggling in a specific problem. I actually have a draggable element based on a grid of 4 and I would like to create an event each time the draggable item reaches a specific position on this gird.
Here is the html of this grid,
<div class="selector">
<div class="title">
<h2>Vælg lånebeløb</h2>
</div>
<div class="draggable">
<h3 id="krd">kr</h3>
</div>
<div class="line">
<img src="./resources/images/line.png" alt="line">
</div>
<div class="legend">
<p>3.000</p>
<p>4.000</p>
<p>5.000</p>
<p>6.000</p>
</div>
</div>
and here is the jquery,
$("#krd").draggable({
grid: [ 190, 0 ],
cursor: "move",
containment: '.selector',
drag: function( event, ui ) {
if(ui.position.left = 190) {
$(".bluebox h2").text("3.000 Kr");
} else if (ui.position.left = 380) {
ect......
} {
}
}
});
What I am trying to do is that when we move the bar, it changes the text in the sidebar. I tried different options since but couldn't figure out what I am missing. Here is the link of the page on github of the project, maybe you will have an idea about it.
Here is the link of the code in github
https://github.com/erwanriou/goKredit---Frontpage/
and the render of the page to get a better idea of the problem.
https://erwanriou.github.io/goKredit---Frontpage/

Expanding upon my comment, I would advise using jQuery UI Slider. You will need to theme it, but the code would be:
$(function() {
$("#krd").slider({
min: 3,
max: 6,
value: 3,
slide: function(e, ui) {
$(".bluebox h2").text(ui.value + ".000 Kr");
}
});
});
Example (in progress): https://jsfiddle.net/Twisty/bjfuLjzL/2/

jQueryUI dragged item fires drop for each element that's behind the first droppable

For demonstration I've created this fiddle: http://jsfiddle.net/Lxmr1n4p/4/
In a web game I have several layers that are positioned absolute and layered one above another. In those layers there are droppable elements.
In the fiddle I made a black div as a draggable element. If I drop it on the big midgrey drop target, it alerts correctly, that it dropped on layer 2.
But if I drop it on the dark grey area, it says that dropped on layer 2 and when I click okay it also alerts that it dropped on layer 1, which I don't want, since (beside that it lays behind item in layer 2), the item in layer 1 has nothing to do with this action, a complete layer is above it.
This is the layout:
<div class="layer1">
<div class="r">
<div class="item"></div>
</div>
</div>
<div class="layer2">
<div class="r">
<div class="item"></div>
</div>
</div>
<div class="drag"></div>
div.r just makes a relative box.
And this is my javascript:
$(document).ready(function () {
$('.layer1 .item').droppable({
drop: function () {
greedy: true,
alert('dropped on item in layer 1');
}
});
$('.layer2 .item').droppable({
drop: function () {
greedy: true,
alert('dropped on item in layer 2');
}
});
$('.drag').draggable({});
});
Is there a way to tell jqueryui that I only want the uppermost item to trigger the drop event?
This example is not real game code, since it's way to big.

Hi you could disable the other dropable element(s) on hover:
over: function(event, ui){
$( ".layer1 .item" ).droppable( "disable" )
},
out: function(event, ui){
$( ".layer1 .item" ).droppable( "enable" )
}
http://jsfiddle.net/Lxmr1n4p/5/

Dragging a div a fixed distance from bottom to top

I am creating a project where I want to be able to drag a div (a drawer) that is (mostly) positioned off the bottom of the screen a fixed distance on the Y axis. The distance I want to move is the height of the div (drawer - minus the drawer handle).
It was pretty easy to get this working from top to bottom, but reversing it is posing to be quite a challenge. I feel like it might just be a simple math error.
I have put together a fiddle to better illustrate the issues I'm having.
http://jsfiddle.net/q8DE6/2/
Here's my code:
HTML
<div id="panelWrapper">
<div id="panel" class="panel">
<p> The height of this drawer is dynamic, and will slide the appropriate amounted based on the height of the content. </p>
<p> Any type of content can be included in here. The body of the drawer and the drawer pull tab can also be styled as you see fit, just modify the css/styles.css file. </p>
<!--necessary div for slide tab, modify as needed, but don't delete -->
<div class="slide">
<a id="drawerSlide" href="#" class="drawer-slide">
<table id="sTab" class="slideTab">
<tr>
<td id="stText1"></td>
<td id="stImg">Pull here.</td>
<td id="stText2"></td>
</tr>
</table>
</a>
</div>
</div><!--/panel -->
</div><!--/panelWrapper -->
<div id="content">
<div id="header">
<div id="menuBar">
<h3>Header Bar Text.</h3>
</div>
</div>
<div id="container">
</div>
<div id="footer">
<p>Footer Area.</p>
</div>
</div><!--/content -->
Slide Function:
JS:
function drawerSlide(slideDir) {
switch (slideDir) {
case 'bottomToTop':
//drawer styling
$('.panel, .slide').addClass('botToTop');
$('.panel').addClass('panelTB');
$('.slide').addClass('slideBotToTop');
$('#sTab').addClass('slideTab');
$('.panel p').filter(":first").css('padding-top','50px');
//hide overflown Y axis content. Hopefully this won't cause any conflicts with your existing code/page.
$('body').css('overflow-y','hidden');
botStartPos = $(window).height() - 50;
offset = $('#panel').offset();
panelHeight = $('#panel').outerHeight();
topEndPos = botStartPos - panelHeight +50;
yPos = botStartPos;
// if you need a different drawer starting point, adjust the starting position here (50).
panelHeight = parseFloat(panelHeight) - 50;
console.log("botStartPos:" + botStartPos);
console.log("topEndPos:" + topEndPos);
console.log("yPos:" + yPos);
$('.panel').css('top', botStartPos);
$('#panel').draggable({
axis: "y",
containment: [0, botStartPos, 0, topEndPos] //0, botStartPos, 300, topEndPos
},
{
drag: function( event, ui ) {
if (yPos > botStartPos || yPos < topEndPos) {
return false;
}
else {
offset = $(this).offset();
yPos = offset.top;
console.log(yPos);
}
}
});
}
}
$(document).ready(function() {
drawerSlide("bottomToTop");
});
I'm thinking the issue might be with the way I'm using the offset.top command to move the drawer, but I'm stumped as to how to do it correctly.
Right now what is happening, is when you click/hold the handle, it "jumps" up the fixed distance, instead of being able to drag it. Also, you can't drag down to put the drawer away, but you can drag up once again and it "jumps" down the fixed distance. Not really what I'm after.
The desired result I'm looking for is one of a typical "drawer" behavior. When the user clicks and holds on the handle, they can "pull" the drawer up the fixed distance, and then "push" it back down the same fixed distance, so the handle never falls off screen.
My guess is it that it's a math problem with the containment function. I still don't fully understand it well, so the problem may lie within the coordinates I'm using?
Any advice would be most appreciated. :)

jQuery textarea draggable

OI have a simple problem with jQuery draggable with a textarea.
I have to insert a textarea into a div draggable but the area of textarea isn't draggable, only border! I have tried to disable textarea but nothing.
I would like to have a textarea NOT editable but draggable / resizable.
This is my html code:
<div class="drag-item item-txt txt-static" id="1>" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;">
<textarea disabled style=" width:98px; height:48px;">Some text</textarea>
</div>
My jQuery code:
$('.drag-item').draggable({
snap : true,
cursor : "move",
delay : 100,
scroll : false,
containment : "parent",
stop: function (e, ui){
//some code
},
drag: function(e, ui){
//some code
}
}).resizable({
containment : "parent",
stop: function(e, ui) {
var width = ui.size.width;
var height = ui.size.height;
var hereDrag = this;
if($(hereDrag).find('textarea').length > 0){
$(hereDrag).find('textarea').css('width', width - 10);
$(hereDrag).find('textarea').css('height', height - 10);
}
},
resize: function(e, ui){
//some code
}
})
How can I make this textarea not editable but draggable and resiazable in all the area e not onyl to the border?
Thanks

While the accepted answer works for this specific situation the reasoning is simply wrong. So for anyone wanting to understand how this works:
The jQuery UI draggables cancel option is a jQuery selector, which specifies elements on which it should not be possible to start a drag operation.
According to the API it defaults to input,textarea,button,select,option.
So all that is needed to allow dragging on a textarea inside the draggable is to supply any cancel option that does not include textarea.
$('.drag-item').draggable({cancel: ''});
or
$('.drag-item').draggable({cancel: 'input,button,select,option,.undraggable'});
The accepted answer sets id="text" on the textarea and sets cancel: "text" on the draggable. What this really means is that any <text></text> element inside the draggable div will cancel the drag operation, while dragging will work on any other element - including the textarea. The id attribute is entirely irrelevant in this case.
If one wanted to cancel dragging (not enable dragging) on a specific element with an id="text" attribute, then the correct value for the cancel option would be the jQuery selector #text.

DEMO
Try this,
just add an id attribute to your textarea id="text" and add an attribute cancel:"text," in your draggable()
html
<div class="drag-item item-txt txt-static" id="1>" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;">
<textarea disabled style=" width:98px; height:48px;" name="text" id="text">Some text</textarea>
</div>
code
$(function () {
$('.drag-item').draggable({
snap : true,
cursor : "move",
delay : 100,
scroll : false,
cancel: "text",
containment : "parent",
drag: function(e, ui){
//some code
}
}).resizable({
containment : "parent",
stop: function(e, ui) {
var width = ui.size.width;
var height = ui.size.height;
var hereDrag = this;
if($(hereDrag).find('textarea').length > 0){
$(hereDrag).find('textarea').css('width', width - 10);
$(hereDrag).find('textarea').css('height', height - 10);
}
},
resize: function(e, ui){
//some code
}
})
});
Hope this helps,thank you

Have you tried :
<div class="item-txt txt-static" id="1" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;">
<textarea class="drag-item" disabled style="width:98px; height:48px;">Some text</textarea>
</div>
The text area was not draggable since you have given draggable property to the div only.

jQuery - drag element inside DIV / or sortable element

I'm having a problem with dragging a div inside an other div element.
HTML looks like this:
<div id="grid">
<div id="el1" style="width:300px"></div>
<div id="el2" style="width:100px"></div>
<div id="el3" style="width:100px"></div>
<div id="el4" style="width:100px"></div>
</div>
All elements are draggable and have the css style float:left;position:relative;.
When I drag el1 to the place of el3 it will work, but of course it will overlap the element el3.
The draggin jquery draggable is working fine but I want to insert div with id el1at the HTML code in this position.
That it will look like this:
<div id...>
<div id="el2...
<div id="el3...
<div id="el1...
<div id="el4...
</div>
My problem now is, that this is a grid. el1 has the width of '300' all other the width of '100'. Dragin el1 to the place of el3 should swap el2, el3 and el4 to the place of el1 and el1 to the place of el2, el3, el4.
To get this behaviour I think I'm needed to move the div HTML code after el4. But how to determine which element is the nearest?
------- UPDATED-------
I way trying to use sortable... see here http://jsfiddle.net/vwK5e/2/
But if you put the red box over number 3, the red box will be in the second line (correct) but number 4 should be next to number 3 cause of the empty space.
TIA
frgtv10

Refer to http://jqueryui.com/demos/sortable/#display-grid
I guess you want functionality like this.
Answer
A different kind of jquery sortable

My solution looks like this:
Instead of jQuerys draggable I'm now using sortable (link to sortable).
In addition to this I'm now getting the help of the jQuery plugin called masonry(link to masonry)
Example:
// Masonry
$('#container').masonry({
itemSelector: '.element',
isResizable: true,
columnWidth: 100
})
// Sortable
$('#container').sortable({
items: '.element',
forcePlaceholderSize: true,
placeholder: 'card-sortable-placeholder element',
tolerance: 'pointer',
handle: '.handle',
cursor: 'move',
cancel: '.notdrag',
start: function(event, ui) {
ui.item.addClass('dragging').removeClass('element');
ui.item.parent().masonry('reload')
},
change: function(event, ui) {
ui.item.parent().masonry('reload');
},
stop: function(event, ui) {
ui.item.removeClass('dragging').addClass('element');
ui.item.parent().masonry('reload');
}
});