I have app where i need only snap element to top and bottom edges of parent element. I try to find how to do it in stack but i can't find it!
el.draggable({
start: function(){
var snapped = $(this).data('draggable').snapElements;
snapped.forEach(function(el){
el.width = 1000000;
el.left = -50000;
});
}
})
One approach is doing the snapping manually instead of relying on the draggable's functionality. E.g. you can disable the snapping and in your drag handle implement it by changing the object's position whenever it's close enough to whatever location you like.
Here's a solution for the similar request: Getting jQuery draggable to snap to specific grid
Related
The issue:
Whenever I change the value on the Sortable CursorAt Left after the initiation, the new value does not update Sortable.
Here is the Javascript function
var cursorL = 100;
$('.s').sortable({
helper:'clone',
cursorAt: {left:cursorL, top:0}
});
$('.s').disableSelection();
$('.me').click(function(){
cursorL = 50;
$('.s').sortable('refresh');
});
http://jsfiddle.net/kofr6f8u/ is the workable example. It points to the center perfectly. However, after you click the button and the cursorL value changes, the sortable will not change along with it.
The purpose:
I want the cursor to always point to the center of the helper or the drag element. When the window resizes, the helper or drag element will also resize itself based on the window size; thus changing the position of the CursorAt (left, right).
Solution that I have attempted. Making the changes in Sortable('start') function. That also did not work. Adding in Sortable('refresh')
Is there a way to update the Sortable curosrAt element after the element is changed?
Thank you for any advice!
According to sortable widget docummentation refresh :
Refresh the sortable items. Triggers the reloading of all sortable items, causing new items to be recognized.
It's used for "registering" new items. It does not seem to address the setting changes.
Use option to set the cursorAt, after initialization:
$('.me').click(function(){
$( ".s" ).sortable( "option", "cursorAt", { left:50, top:0 } );
});
JSFiddle
I am working on a fairly typical image "reveal" effect using jQuery UI’s draggable() method; I’m having a lot of trouble making it work in a responsive environment:
http://codepen.io/ProfessorSamoff/pen/qEaNMM
As you’ll see, the reveal functionality works correctly at full size as well as when the browser window size is reduced. But the draggable handle doesn’t always snap to the proper position when the browser window is resized. (Although it does so when it’s clicked and dragged.)
Likewise, you’ll see that I have some commented code that checks against the browser window size:
if($(this).width() != width)
{
}
This works in order to get the draggable handle to the correct place when resizing the browser window, but it breaks the draggable functionality.
I have tried a few of the suggestions on Stack Overflow concerning draggable() and resizable(), but none of them work.
take a look here:
http://codepen.io/anon/pen/LEmgBP
javascript now appears in this way:
var $reveal = $(".reveal");
$reveal.draggable({
axis: "x",
containment: "parent",
iframeFix: true,
refreshPositions: true,
drag: function()
{
var position = $(this).position();
var parentWidth = $(this).parent().width();
var width = (position.left / parentWidth) * 100
$(".featured").width(width + "%");
}
});
$(window).resize(function() {
$reveal.css('left', $(".featured").width()+'px')
});
It's not elegant but it seems to work.
basically I did 2 things:
1) I've setted $(".featured") width with %
2) on windows resize I change the position of the cursor with
$reveal.css('left', $(".featured").width()+'px')
note: point 2) is a workaround but I didn't find any way to move the cursor programatically. Maybe using a library to emulate the drag event (like https://github.com/mattheworiordan/jquery.simulate.drag-sortable.js/blob/master/README.md) you could find something better
I've implemented drag and drop using the jQuery UI draggable widget.
I'm now implementing auto scroll during drag operations. I set it up so that when you start to drag, gray overlays appear at the top and bottom of the browser window. When you drag into one of these overlays, the browser window starts to auto scroll.
You can see my test page at http://www.softcircuits.com/Client/scrolltest.html. Drag an item by dragging one of the crosshair icons on the left side.
But there's a problem: if you scroll to the bottom of the page, and then drag an item to the top overlay, it will scroll up as expected. However, for me, I get about half way up the page and the draggable helper won't go any higher. There's no way for me to drag all the way to the top of the page.
This most likely seems related to the Draggable widget. Is anyone able to see why this is happening? I'm using Google Chrome on Windows 7.
To be cross-browser compatible and to avoid wird behavior, I would recommend to use all JQueryUI draggable callbacks.
I read some days ago that the last version of Chrome has some really tricky problems with natives HTML5 draggable events.
For example, I have just checked your web page source code and you are using $('.drag-handle').on('drag', function(){...}); => You should use the drag callback.
I would also recommend to not use window as the scrollable container in your case. You should create a div to wrap all the tables contents and use it as a scroll container. I have already done this implementation in the past and it is working.
Don't forget to set the wrapper ID in the containment option durring the draggable widget creation.
If it always not working, you could also try to overwrite the helper position in the drag callback :
//Save the mouse position in global variables
$(document).mousemove(function(e){
window.mouseXPos = e.pageX;
window.mouseYPos = e.pageY;
});
$('[id^="drag-"]').each(function() {
$(this).draggable({
opacity: 0.7,
cursorAt: { top: 15, left: 50 },
scroll: true,
stop: function(){},
drag : function(e,ui){
//Force the helper position
ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top;
});
});
Changing the draggable containment option from window to document worked for me.
$('.drag-handle').draggable({
...
containment: "document",
...
});
See: http://docs.jquery.com/UI/Draggable#option-containment
I'm having issue with VML (which I use as fallback for svg)
I use jQuery UI draggable to let user be able to move an element around. The problem occurs when I resize the image (which is a v:image) by changing the style attribute of height and width.
What happen at this point is that the element get stuck at the left top corner of it's container and cannot be dragged anymore.
A strange thing is that when I ask for the position (top, left) of the draggable element in the JavaScript console, I get value, and those values change when I click and drag - even though the element isn't visually moving...
Anyone run into this problem before?
Here's where I change then size of my element.
$($image)
.css({
'width' : zoomInPx_width + "px",
'height' : zoomInPx_height + "px"
});
The draggable is set pretty straight forward
$($image).draggable({
drag: function () { /*callback here*/ }
})
Finaly I manage to make this work.
Seems that VML crash on IE 8 when we change size of a draggable element. So, I had to destroy the element and recreate it from scratch when sliding occurs...
That's not really performant, but that's the only fix to work for me up here.
By the way, .detach() didn't work, you have to destroy it and recreate it from scratch.
You can get some info there too: http://www.acumen-corp.com/Blog/tabid/298/EntryId/26/Using-jqueryRotate-ui-draggable-and-resizable-images-in-IE7-IE8-and-any-other-browser.aspx
on my application I used this code:
var $cloned_image = $($image).clone().get(0);
$($image).remove();
// need add draggable again
$($cloned_image).draggable();
document.getElementById('k').appendChild($cloned_image);
$image = $cloned_image;
I've just created a custom carousel with images and have got previous/next arrows to move the images around.
Does jQuery have an event where I can click on the photo, drag it to the left or right and fire the same action that I currently have on the arrows?
My current code looks like this
$carousel.animate({
left: '+=' + amountToAnimate
}, 800, 'backEaseOut');
I also need to prevent Firefox from 'picking' the image up.
I'm already using jQuery UI if that helps.
You will need to add draggable() to your item and add some custom code the start event.
With more sample code it might be easier to give fuller advice, jsfiddle.net sample is best
EDIT:
You could use events api http://api.jquery.com/category/events/ , mousemove and mousedown, to figure which way to move the image, and call the animate event.
Re-using draggable , with some clever options and event functions may be better
I also need to prevent Firefox from 'picking' the image up.
Use the Mozilla CSS Extensions
-moz-user-focus:ignore;
-moz-user-select:none;
might to do the trick.
This may not be the most elegant solution but I believe it should do the job
// shortcut
var j = jQuery;
// add mouse down listener to the image
j('#image_id').mousedown(function(){
// add mouse move
j('#image_id').mouseMove(function(event){
// declare vars
var previous_x_position;
var previous_y_position;
if(x_position)
{
previous_x_position = x_position;
previous_y_position = y_position;
}
var x_position = event.pageX;
var y_position = event.pageY;
if(previous_x_position < x_position)
{
// we are moving right
}
else
{
// we are moving left
}
if(previous_y_position < y_position)
{
// we are moving down
}
else
{
// we are moving up
}
})
})