$(".draggable").draggable({axis: 'x'});
<div class="draggable">
I am draggable to left side only, and not right or up or down, the axis : x controls me to prevent up or down dragging, but make me not right too. Thanks
I solved it saving the previous left offset and comparing it with the new left offset.
var previousOffset = null;
$( "#draggable" ).draggable({
axis: 'x',
drag: function(event,ui){
if(previousOffset == null)
previousOffset = ui.offset.left;
else{
if(previousOffset < ui.offset.left)
return false;
else
previousOffset = ui.offset.left;
}
}
});
Here's working: http://jsbin.com/ubine3/2
Related
Is there a way to implement keyboard navigation (up, down arrows) in a tablesorter table within a fixed height iframe or div?
Thanks in advance.
This code adds very basic functionality. Adding a tabindex attribute allows the rows to become focusable (demo):
$(function () {
$('table').tablesorter({
theme : 'blue',
widgets : ['stickyHeaders', 'zebra'],
widgetOptions : {
stickyHeaders_attachTo : '.wrapper'
}
});
// make tr focusable
$('table tbody tr').attr('tabindex', 0);
// make arrows keys change row focus
$('body').on('keydown', function(e){
var $tr = $(':focus');
// only alter arrow key default movements when a row is focused
if ( $tr.length && $tr[0].nodeName === 'TR' ) {
if (e.which === 40) {
// prevent arrow causing a scroll
// arrow scrolls 1.5 lines, so it doesn't sync up
e.preventDefault();
$tr.next().focus();
} else if (e.which === 38) {
e.preventDefault();
$tr.prev().focus();
}
}
});
});
I'm trying to figure out how to enable visitors to drag to rotate a 3D div using .draggable(). Currently the div rotates but also moves vertically and horizontally making the process touchy and unpredictable. I would like the origin of the div to stay fixed, and the "dragging" to only affect the rotation, so users can "spin" the div around to see the other sides.
here is link to the codepen: http://codepen.io/armandhammer8/pen/IiBga
$('.anime').draggable({
drag: function(event, ui){
var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
$(this).css({
'transform': rotateCSS,
'-moz-transform': rotateCSS,
'-webkit-transform': rotateCSS
});
Thanks in advance!
The div element is a little house:
I want to be able to spin it around
The built in functionality of draggable is giving you the problems.
It's not so hard to get the functionality by yourself and stop using draggable.
Javascript:
var offset = 0, startX;
var elem = document.getElementById("element");
$('.draggable').on('mousedown', function (e) {
startX = e.pageX - offset;
})
.on('mouseup', function() {
startX = null;
})
.on('mousemove', function (e) {
if(startX) {
offset = e.pageX - startX;
elem.style['-webkit-transform'] = 'rotateY(' + offset + 'deg)';
}
});
demo
I am trying to make the page scroll when we drag element top or bottom of the screen. It working fine when container is inside the screen but unable to scroll when container is bigger than screen. To Solve this issue I have write this:
$('.dragable').draggable({
zIndex:100,
revert: "invalid",
helper: "clone",
scroll: true,
drag: function(e)
{
if(e.clientY <= distance)//top
{
isMoving = true;
clearInetervals();
intTopHandler= setInterval(function(){
$(document).scrollTop(e.clientY - step)
},timer);
}
if(e.clientY >= ($(window).height() - distance))//bottom
{
isMoving = true;
clearInetervals();
intBottomHandler= setInterval(function(){
$(document).scrollTop(e.clientY + step)
},timer);
}
}
});
After releasing the draggable element screen stays at same position unless we move the draggable again. I have tried scrollBy instead of scrollTop method but its not working on mobile devices. Please suggest any help. Thanks
Remove clearIntervals and use scrollTop without setInterval given below
$('.dragable').draggable({
zIndex:100,
revert: "invalid",
helper: "clone",
scroll: true,
drag: function(e)
{
if(e.clientY <= distance)//top
{
$(document).scrollTop(e.clientY - step)
}
if(e.clientY >= ($(window).height() - distance))//bottom
{
$(document).scrollTop(e.clientY + step)
}
}
});
it is working fine
I am using jQuery UI to make some elements draggable and droppable. Much like a sortable, I'm trying to arrange the dragged element left/right/above/below to a hovered element when it's dropped. Also, I want to show an indicator on hovering another element, where the element will be arranged to, when it's dropped.
The behaviour should be, the the element will be dropped left of the hovered element if the cursor hovers the left third of the element. It should be dropped right of the hovered element if the cursor is above the right third of the hovered element. In script.aculo.us, there's a parameter called 'overlap' which indicates the mouse-overlap in percent of the hovered element.
Is there something similar in jQuery UI or how can this be done?
Ok, here's one way to do this. Basically, the idea is to read the offset, width and height of a droppable once a draggable is dragged over it. And while an element is dragged and the other element is hovered, the overlap is calculated using the mouse-position, the offset and the dimensions of the element (the offset is subtracted from the mouse-position and compared to the droppable's dimensions):
$(function() {
var offx, offy, w, h,
isOverEl = false;
$( ".component" ).draggable({
drag: function(event, ui) {
if(!isOverEl) return;
console.log(
((event.pageY-offy)/h)*100, // returns vertical overlap in %
((event.pageX-offx)/w)*100 //returns horizontal overlap in %
)
}
});
$( ".component" ).droppable({
over: function(event, ui) {
var $this = $(this),
offset = $this.offset();
offx = offset.left;
offy = offset.top;
w = $this.outerWidth();
h = $this.outerHeight();
isOverEl = true;
},
out: function(event, ui) {
isOverEl = false;
}
});
});
is it possible to change the left position of a div after dropping it?
i'm trying to do that using this code but it's not working, can anybody help me...
thanks a million in advance :)
$(function () {
$("#task_1").draggable({ revert: 'invalid' });
$("#Lina").droppable({
drop: function (ev, ui) {
var pos = $("#task_1").position();
// kolla(pos.left);
if (pos.left < 0) {
alert(pos.left);
$("#task_1").position().left = 0;
}
else {
// do something else
}
}
});
});
Just a quick idea, have you tried:
$("#task_1").css("left","0");
If the outer drop-area has relative positioning (not sure, have to check) that should work.
Basically, you want the dropped div to shift to the very left of the drop area, right?
Update
You have it so that the position is changed when the condition is pos < 0. Since the div won't be in the drop-area if it's outside of it, I think you mean pos > 0. Also, why bother checking, if it's already 0, it just changes it to what it already is.
For instance:
$(function () {
$("#task_1").draggable({ revert: 'invalid' });
$("#Lina").droppable({
drop: function (ev, ui) {
this.position().left = 0;
}
});
});
Notice I also made it "this" since you are changing the selector.