How can I make a div that is draggable / moveable horizontally, but not vertically?
I would prefer if this could be done without JQuery UI. JQuery is fine. Or vanilla JS.
Creating such a behavior yourself would be quite a bit of work. I would recommend using jquery ui :
http://jsfiddle.net/basarat/f7nNf/1/
Its a single line of code:
$( "#draggable" ).draggable({ axis: "x" });
And you don't event need to download the complete jquery ui. You can do a custom build with only draggable here : http://jqueryui.com/download/
Read more about draggable here: http://jqueryui.com/draggable/#constrain-movement
Related
i wanted to create some icons like windows, but not being able to do so. here is irregular positioned icons DEMO
My css works fine if i use simple Draggable function like one :
$( ".big_dawg span" ).draggable({
});
Please change height of jsfiddle result to see responsive spans: Another DEMO
or if i change position of spans forcefully using this function :
$(".big_dawg span").css("position", "initial");
Then it works Exactly as i want but then .Draggable isn't working.
I'm currently trying to make an html page to organize some widgets that I clone and move with JQuery Draggable to place them in a div Droppable.
So, my problem is that I want to resize a div when it is in the Droppable div (the cloned one). But it doesn't work. I can only resize the div when it is in initial position.
I've trying a lot of things like this but the problem is still the same.
$('.widget').resizable().draggable({
//containment: "#seizeNeufDroppable",
helper: 'clone',
cursor: 'move',
tolerance: 'pointer',
revert: true
});
Here my code at JSFiddle :
https://jsfiddle.net/ukoeb65g/
It is six month now, You probably found your answer, but may be other folks need help on this one.
I changed your code, tried to make it simple, like, you don't need:
revert: true
Anyway Here is an
update of your fiddle.
I have created a program that resizes a panel to the top, bottom, and it also goes over the second panel without shrinking it. My code runs just fine, but I don't know how to do it WITHOUT using the resizable method in either jQuery or JavaScript.
Here's my code that works just fine.
$(function() {
$( "#orangeBox" ).resizable({
handles:'n'
});
});
Here is a JS Fiddle: http://jsfiddle.net/sandenay/hyq86sva/1/
I'm using Jquery UI's autocomplete, found here, and Nivo slider, found here, on my website. The Autocomplete is above the nivo slider. What's happening is on the first slide of my nivo slider, when I type in something for the autocomplete, suggestions appear without the banner below covering it. But when the second slide appears the suggestions are hidden underneath the banner. I'm basically using the default settings for both jquery ui autocomplete and nivo slider.
Here's a graphic:
I read about wmode, which is basically a fix if the banner was in flash, but mines in jquery. I'm thinking it will have to do with z-index. Am I correct? How should I fix this?
Thanks for all help!
The dropdown (autocomplete) that comes out from the textbox, as part of jQuery UI's autocomplete: gets dynamically created a with a z-index: 1 within it's wrapper, <ul class="ui-autocomplete" style="z-index: 1; ...etc">
You'd simply need to make sure all autocomplete things (or even just that specific one) have a much higher one than nivo slider.
jsFiddle DEMO (get it to come up, then inspect, you'll see style="z-index: 99999;"
$( ".autocompleteThis" ).autocomplete({
source: availableTags,
open: function (event, ui) {
$('.ui-autocomplete').css('z-index', '99999');
}
});
Use the open: function (event, ui) {} to set the autocomplete z-index there.
Trying to apply both draggable and resizeable with jQuery to an image does not work correctly. It will resize but not drag. Are there any known solutions to this?
This seems to work fine if I wrap the img in a div:
<div id="drag_resize"><img src="img.jpg"/></div>
And then call resizeable and draggable on that div:
$("#drag_resize").resizable().draggable();
Here's a working example: http://jsfiddle.net/andrewwhitaker/HNYVk/