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');
}
});
Related
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/
So I have a contenteditable=true div, of which there are images and text within this div. I would like to drag the images within this div to move the image around while shuffling and pushing the text away. How can I do this? I had tried jquery ui draggable and the image float around the text
function drag_image() {
$("#drag").draggable({
//opacity: 0.7, helper: "clone",
containment: "#background",
stop: function(ev, ui) {
pos = ui.position;
$("#drag").css({
'top':pos.top,
'left':pos.left,
'position':'absolute'
});
console.log("position top "+pos.top+" position left"+pos.left);
}
});
}
This is my jquery code for dragging
<div id="background"contenteditable="true" style="border:solid black 1px;height:500px;overflow:auto;">
<img OnClick="drag_image()" id="drag" src="http://img.wikinut.com/img/gycf69_-6rv_5fol/jpeg/0/Best-Friends-Img-Src:Image:-FreeDigitalPhotos.net.jpeg" width="40px" height="40px" style="max-height:200px;">
Penang is a state in Malaysia and the name of its constituent island, located on the northwest coast of Peninsular Malaysia by the Strait of Malacca.
</div>
This is my HTML code
Can anyone please help me out
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/
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.
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');
},*/
});