I have issue with jQuery sortable.
Here is live example: JSFiddle
HTML:
<div class="a">
<div class="b">
a<br>
b<br>
c<br>
d<br>
e<br>
f<br>
g<br>
h<br>
i<br>
j<br>
k<br>
l<br>
m<br>
n<br>
o<br>
</div>
</div>
JS:
$(function(){
$('.a').sortable();
});
CSS:
.b {
border: 1px solid;
width: 100px;
height: 100px;
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
In this case I have div with scroll. I scroll to the end of the div and I try to sort element using drag&drop. After this action, scroll in div jumps to beginning of this div. How I can "remember" position of scroll and "revert" it after sortable?
You need to save the scroll position and then reapply it when you stop moving the object.
JSFIDDLE: JSFIDDLE
$(function(){
var scrollTop = 0;
$('.a').sortable({
start: function(event, ui){
scrollTop = ui.item.scrollTop();
},
stop: function(event, ui){
ui.item.scrollTop(scrollTop);
}
});
});
You should use the sortable() method on the inner <div id="b"> and put every element you want to sort inside a <div> tag so they can be treated as DOM elements.
Here's a working solution JSFiddle
You might want to check THIS topic.
Related
Below is my code. When I drag and drop the '.dragme' div then the parent of this div become change from '#source' to '#drop'. Its ok. But this dragme div's position become fixed in #drop div and I can't move it anywhere in #drop div. How can I do it? Thank you.
HTML:
<div id="source" class="box">
<div class="dragme">bacon</div>
</div>
<div id="drop" class="box"></div>
CSS:
.box { height:100px;width:100px;border:1px solid #333; }
.dragme { width:100%; margin:5px; border:1px solid #333; }
JavaScript:
$('.dragme').draggable();
$('#drop, #source').droppable({
drop:function(e, ui) {
$(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
}
});
Here is a Demo Fiddle.
$('.dragme').draggable();
$('#drop, #source').droppable({
drop:function(e, ui) {
//$(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''})); //removed this line.
}
});
You are setting css .css({'top':'', 'left':''}), which is why you cannot move it.
Your code is setting the dragged element position to TOP LEFT, that's the reason why you are not able to drag that element to some other position. To avoid this problem, just update the position only if you drag the element out of the parent container.
Updated Code:
$('.dragme').draggable();
$('#drop, #source').droppable({
drop:function(e, ui) {
if ($(e.target).attr('id') != $(ui.draggable).parent().attr('id')) {
$(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
}
}
});
Fiddle: http://jsfiddle.net/LHGqP/1/
There is a plethora of similar questions around but none of them seem to be looking for what I'm looking for, or else none of the answers are useful for my purposes.
The jsfiddle: http://jsfiddle.net/tumblingpenguin/9yGCf/4/
The user will select an option and the page will reload with their option applied. What I need is for the "option list" DIV to be scrolled down to the selected option such that it is in the center of the option list.
The HTML...
<div id="container">
<a href="#">
<div class="option">
Option 1
</div>
</a>
<!-- other options -->
<a href="#">
<div class="option selected"> <!-- scroll to here -->
Option 4
</div>
<!-- other options -->
<a href="#">
<div class="option">
Option 7
</div>
</a>
</div>
The selected option is marked with the selected class. I need to somehow scroll the DIV down to the selected option.
The CSS...
#container {
background-color: #F00;
height: 100px;
overflow-x: hidden;
overflow-y: scroll;
width: 200px;
}
a {
color: #FFF;
text-decoration: none;
}
.option {
background-color: #c0c0c0;
padding: 5px;
width: 200px;
}
.option:hover {
background-color: #ccc;
}
.selected {
background-color: #3c6;
}
I've seen this done on other websites so I know it's possible—I just haven't a clue where to begin with it.
P.S. jQuery solutions are acceptable.
Something like this http://jsfiddle.net/X2eTL/1/:
// On document ready
$(function(){
// Find selected div
var selected = $('#container .selected');
// Scroll container to offset of the selected div
selected.parent().parent().scrollTop(selected[0].offsetTop);
});
Without the jQuery (put this at the bottom of the < body > tag:
// Find selected div
var selected = document.querySelector('#container .selected');
// Scroll container to offset of the selected div
selected.parentNode.parentNode.scrollTop = selected.offsetTop;
demo: http://jsfiddle.net/66tGt/
Since you said JQuery answers are acceptable, here's an example of what you're looking for:
$('body, html').animate({ scrollTop: div.offset().top-210 }, 1000);
Replace div for whatever element you want to scroll to.
Here is one possible solution that may work for you:
Demo Fiddle
JS:
$('#container').scrollTop( $('.selected').position().top );
Take a look at this fiddle : http://jsfiddle.net/9yGCf/8/
As requested it scrolls to the middle of the div (you can change the offset by however much you want to make little adjustments). I would probably suggest setting either a line height with some padding and whatnot and then do the math to change the offset that I have at -40 so that it does put it in the middle.
But I used jquery and came up with this quick little code... also added some code to change the selected option
$('.option').click(function(){
$('.selected').removeClass('selected');
$(this).addClass('selected');
$(this).parent().parent().scrollTop(selected[0].offsetTop - 40);
});
This magical API will automatically scroll to the right position.
element.scrollIntoView({ block: 'center' })
See more details:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Example:
<div>
<div class='drop'>
<div class='drag'></div>
</div>
<div class='drop'>
</div>
<div class='drop'>
</div>
<div class='drop'>
</div>
<div>
</div>
</div>
$('div.drag').draggable({ containment: 'div.drop' });
Normally, if there is only 1 "div.drop" element, it works as intended. If there are more than 1(like in the example above), I thought that it would be dragged/dropped in any of the "div.drop" divs. As it turns out, it is only draggable/droppable to the first element matched by the "div.drop" selector.
Is there a workaround for this(that is, make it contained/droppable/draggable only in the "div.drop" divs)?
EDIT: I guess you are right guys. After some introspection, I realized that I didn't go for your suggested solutions since there are padding between the divs and I don't want the the "div.drag" divs to be dropped on the padded area.
It don't works like that !!
The containment is to constraint bound of dragging.
You want drag and drop.
Then you have to configure drag for div.grag:
$('div.drag').draggable();
And configure drop for div.drop:
$('div.drop').droppable();
You can add containment for your drag element with your first div level:
<div id='dragZone'>
<div class='drop'>
<div class='drag'></div>
</div>
<div class='drop'>
</div>
</div>
$('div.drag').draggable({ containment: '#dragZone'});
containment restricts the movement of a draggable within the bounds of the given element(s). You could set containment to the parent of the div.drops.
You should make the div.drops droppable, append the draggable on drop, and use the revert: 'invalid' option so that the draggable reverts if it's not dropped on a droppable
$('div.drop').droppable({drop: function(e, ui) {
ui.draggable.appendTo(this);
}});
$('div.drag').draggable({
helper: 'clone',
revert: 'invalid'
});
As the guys have pointed out the containment selector does not work like that as it Constrains dragging to within the bounds of the specified element or region.
You could try something like below:
JQuery References:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
HTML:
<div id="dragContainer">
<div class='drop'>
<div class='drag'>drag</div>
</div>
<div class='drop'>drop
</div>
<div class='drop'>drop
</div>
<div class='drop'>drop
</div>
<div class='nodrop'>
</div>
</div>
JQuery:
<script type="text/javascript">
$('div.drag').draggable({ containment: '#dragContainer', revert: "invalid" });
$('div.drop').droppable( {
drop: handleDropEvent
} );
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
alert( 'Ok to drop here onto me!' );
}
</script>
Do try my code
<style>
.container {
border: 2px solid #000;
}
.container img {
width: 45px;
height: 45px;
}
.draggable {
width: 40px;
height: 40px;
background: #F90;
border-radius: 10px;
margin: 0 0 0 0;
float: top;
}
.draggable.is-pointer-down {
background: #09F;
z-index: 2; /* above other draggies */
}
.draggable.is-dragging { opacity: 0.7; }
</style>
<script>
$(document).ready( function() {
var $draggables = $('.draggable').draggabilly({
// contain to parent element
**containment: "#box"**
});
});
</script>
Hello. I think this might help you :)
<div class="container" id="box">
and my images are inside this div.
copied following code from http://jqueryui.com/demos/resizable/#default
<meta charset="utf-8">
<style>#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
<div class="demo">
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div>
It outputs this.
I want to capture the double click event for each of cursor position so that if
Double click by horizontal re-size cursor, i can toggle width of current resizable between original and maximun available width.
Double click by vertical re-size cursor, i can toggle height of current resizable between original and maximun available height.
Double click by diagonal re-size cursor, i can toggle width and height of current resizable between original and maximun available width and height.
The handlers have specific classNames:
ui-resizable-se//bottom right
ui-resizable-s//bottom
ui-resizable-e//right
You can select them and bind the dblclick:
$('.ui-resizable-se').dblclick(function(){alert('clicked bottom right handle');})
A pointer to the resizable you'll get inside the function using $(this).parent()
Use firebug to find out the elements you ant to attach the event (like: .ui-resizable-e - self explanatory) and use for example:$(".ui-resizable-e").dblclick(myFunctionToResize);
Is that what you mean?
Hey there,i'm creating a simple inventory using jQuery droppable. For now, it's like :
$(document).ready(function() {
$( ".weapon, .helmet" ).draggable({ revert: "invalid", cursor: "move" });
$( "#weapon_spot" ).droppable({accept: ".weapon"});
$( "#helmet_spot" ).droppable({accept: ".helmet"});
// make inventory slots droppable as well
$( ".inv_slot" ).droppable({accept: ".weapon"});
});
I'm kinda new to JQuery and have some trouble setting an image to be aligned inside a certain div. Everything(.weapon, .helmet etc) is a div. Inside them, there can be images. The divs are 70x70 and the images are of that size as well.
The css is like :
.inv_slot, #weapon_spot, #helmet_spot {
width: 70px;
padding: 10px;
height: 70px;
margin: 10px;
border: 1px solid black;
float: left;
text-align: center;
}
and the image inside a div is like :
<div class='inv_slot'>
<img class='weapon' src= "..." />
</div>
My problem is that when i drop an image to another div, it's not aligned in the center of the div, it's not locked and it can be moved inside it. It seems that i can use Drag.Move somehow to do that, but i can't find some good resource explaining that. Could you please help ? :)
EDIT : I have created a demo at http://jsfiddle.net/kzuRn/2/
Add a drop callback to the droppables and apply the style changes necessary. Because right now the item is still positioned absolutely it will not recognize your center css.
Something like this: WRONG (see below)
drop: function(ev, ui) {
$(this).css({position: 'static'})
}
I updated the fiddle. I was wrong before. this is the droppable, and ui.draggable is the draggable.
drop: function(ev, ui) {
$(this).append(ui.draggable.css('position','static'))
}