jQuery textarea draggable - javascript

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.

Related

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/

Appending text from textarea to div on button click

I have a button that on a click event generates a div. The newly createded div is draggable and stays contained within another div. The issue: As the div is being created I am trying to append text to it. Nothing is getting appended due to not properly grabbing the value from the textarea and appending to the div. JSFIDDLE
Jquery
$('#button').click(function(e) {
$('<div class="draggable" class="ui-widget-content"></div>').draggable({ containment: "parent" }).appendTo('.middle-side');
$('textarea').val().appendTo('.draggable');
});
HTML
<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea><br/>
<input type="button" id="button" value="Add Div with Text"/><br/>
<div>
<div class="middle-side"></div>
</div>
Use .text instead of .appendTo:
$('<div class="draggable" class="ui-widget-content"></div>')
.draggable({ containment: "parent" })
.appendTo('.middle-side')
.text($('textarea').val())
Example: http://jsfiddle.net/0wbnud4k/11/
Alternatively, perhaps a little cleaner:
$('<div />', {
'class': 'draggable ui-widget-content',
text: $('textarea').val(),
appendTo: '.middle-side',
draggable: {
containment: 'parent'
}
});
Example: http://jsfiddle.net/0wbnud4k/13/
.appendTo is a method on the jQuery object. The text you retrieved with .val is just a string, and therefore does not have an .appendTo method.
You should use text method instead of appendTo and change it as follows:
var text = $('textarea').val();
$('.draggable').text(text);
you can also check it at:
http://jsfiddle.net/0wbnud4k/12/

Shift up div and fade in on option selection

Here's a jsfiddle that I found.
HTML
<div class="container">
<header>
<ul class="sidenav">
<li><h2><a data-region="nav-1" href="#"><span class="title">About</span></a></h2></li>
<li><h2><a data-region="nav-2" href="#"><span class="title">Services</span></a></h2></li>
</ul>
</header>
<div id="nav-1" class="infozone z1"><p>Hello I'm box 1.</p></div>
<div id="nav-2" class="infozone z2"><p>Hello I'm box 2.</p></div>
CSS
.infozone{
float:left;
position:absolute;
height:400px;
width:800px;
display:none;
}
.z1 {
background-color: blue;
}
.z2 {
background-color: red;
}
JS
$('.sidenav a').click(function(){
$('.infozone').fadeOut(550);
var region = $(this).attr('data-region');
$('#' + region).fadeIn(550);
})
What I'm trying to do is...
Instead of regular links, they will be < option >s
If a user chooses a certain option, the div that's related to that
option will fade in while moving up 5px. If there was a div that
faded in before, that div would fade out while moving down 5px.
Here is an updated jsfiddle. Unfortunately, the div's are not fading in/out, and on top of that, I'm not really sure how to add the "moving up/down" effect.
Any help is appreciated!
You are binding click event on option, which doesn't work that way. You need to listen to the change event of the select element.
Try:
$('#stateList').change(function(){
var region = $(this).find(':selected').data('region'); //get the data value of the selected option
$('.state').fadeOut(550);
$('#' + region).fadeIn(550);
});
Fiddle
For your question on animating the margin you can use the callback of fadeOut to achieve this.
$('#stateList').change(function () {
var region = $(this).find(':selected').data('region');
var $visible = $('.state:visible');
if ($visible.length) $visible.animate({
'margin-top': '5px'
}, 550).fadeOut(550, function () {
$('#' + region).fadeIn(550).animate({
'margin-top': '0px'
}, 550);
});
else $('#' + region).fadeIn(550).animate({
'margin-top': '0px'
}, 550);
})
Fiddle
You need to bind event with select instead of option. Try this
$('#stateList').change(function () {
var region = $(this).find(':selected').data('region');
$('.state').fadeOut(550);
$('#' + region).fadeIn(550);
})
Demo
Working DEMO
Try this
$('#stateList').change(function(){
$('.state').fadeOut(550);
var region = $("#stateList option:selected").data('region');
$('#' + region).fadeIn(550);
})

jquery ui sortable - Dragging not working correctly when using containment

I'm having an issue with jquery ui sortable where I can't drag certain items (i guess based because of the height of the item elements)
<div class="container">
<fieldset>
<legend>handle 1 THIS CAN'T BE DRAGGED BELOW HANDLE 2</legend>
<div>blah<br /></div>
</fieldset>
<fieldset>
<legend>handle 2 BUT I CAN DRAG THIS ABOVE HANDLE 1</legend>
<div style="display: none">blah<br /></div>
</fieldset>
$(".container").sortable({
axis: 'y',
handle: '> legend',
containment: 'parent',
/*cursorAt: {top: 1},
start: function(event, ui) {
ui.placeholder.height(ui.item.height());
$(this).sortable('refreshPositions');
},*/
});​
see http://jsfiddle.net/ADyhR/10/
EDIT: It seems to work in jquery ui 1.8.9. is it just a bug in 1.8.18?
the commented out javascript lines are things that i've tried but haven't worked, but i figured I might just be slightly off in how i was using them.
You may use the tolerance option and set its value to tolerance: "pointer",. I have updated your DEMO and created a NEW DEMO.
Here is the JS code that works with tolerance option added:
$(".container").sortable({
axis: 'y',
tolerance: "pointer",
handle: '> legend',
containment: 'parent',
/*cursorAt: {top: 1},
start: function(event, ui) {
ui.placeholder.height(ui.item.height());
$(this).sortable('refreshPositions');
},*/
});

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');
}
});

Categories