draggable / moveable <div> horizontally - javascript

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

jquery ui draggable position relative not working

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.

JQuery / Javascript Draggable and Resizable don't work with a div clone

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.

How can I resize a panel WITHOUT using resizable method in either jQuery or pure JavaScript?

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/

Jquery AutoComplete Gets Hidden by Jquery Slider - JQuery Equivalent of wmode?

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.

Work around for jQuery draggable and resizeable on image

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/

Categories