Dear experts,
I am currently working on an code that allows users to drag & resize HTML elements across the pages. I could tackle the draggable no problem. But the problem comes from resizing. I don't know how attach Event Listeners to the "borders" of this elements to trigger the resize, specifically only the "right and bottom" borders.
I am aware of the similar approach on the Jquery UI, but I do not want to use the Jquery UI.
I would like to do it myself with vanilla Javascript and Jquery API.
I have spent the whole day searching on Google for a proper tutorial but failed.
If you could point me to the right direction I would really appreciate.
Dennis
jquery ui appends 8 elements on top of your draggable element. south, southwest, west... and so on. Is it what you meant?
How do users resize them without dragging? if they just input a number have you tried the following
$(element).width(widthInput);
$(element).height(heightInput);
Related
I'm trying to find a Javascript snippet that I can archive the UIScrollView + UIPageControl effect of the iOS using Javascript and CSS3.
Generating the page control to a dot to each view and do the switching is very easy, but the complicated part it is to do the elastic movement.
I would want to do this myself, but it seems to much work to me, like hours of work, tried googling, but I not found anything. I don't like JQuery but the mobile framework doesn't seems to do this.
If I had to do this by myself, do you guys have any suggested approach? I'm thinking in using a parent div, with a bunch of divs inside for each view. Use the parent with overflow: hidden;
and attach event to the parent view and listen to drags and bind to the horizontal scroll offset. This would be a good way? or using css transitions with left or translate-x would be more smooth?
EDIT:
This is what I tried (not working very well): JSFIDDLE
Yeah,
Im not sure about touch swipes, although i think the 'activate' or 'touchstart' handler might be useful. Using CSS3 transitions to achieve the elastic movement is quite smooth, just alter the left or right style property of your internal div and the transfom will move from its current position to where you need it to be.
This is not the worlds bestt example but have a look here
villasanrafael.eu/Gallery.php
I'm looking for JS or jQuery (core dependecy only) code that allows you to resize any html element, or just divs - could use div container for content.
The problem I'm having with jQuerys resizeable() function is it's dependencies with UI and the bloat that would bring to my rather slimmed codebase. Also it only uses a corner handle for resizing where I'd like an interface more along the lines with how table and image resizing works in TinyMCE.
That is, a dashed border around the element to be resized, with 8 points to drag from. If you try the TinyMCE demo on their site you'll see what I mean. It allows for both aspect ratio to be kept and distorted based on dragging point.
Most hits I get on resizing is for a one time resize of images to fit the page width, but I'd love to be pointed in the right direction in case there is a snippet or jquery plugin out there that I've missed.
I got the same "problem" a couple months ago, did not want to use the jquery UI but wanted to resize... I came across this "custom event" plugin. Very light and does the job.
threedubmedia jquery.event.drag
You can see a resizing demo at the bottom of the page.
Hope it helps!
You can use CSS3's resize.
http://jsfiddle.net/BramVanroy/uAzVY/
Not as much functionality as you want, though.
I want to implement a graph designer using draw2d library. In demo, the click on any connection-link is accurate, otherwise in my application the click on the links is not accurate because most of the times the connection is not selected (the elements such as a VectorFigure don't have selection problems). The only difference between my application and demo is the container of the div called "paintarea"; in fact, I don't use a frame dedicated so the paintarea doesn't start form x=0 and y=0.
Anyone can help me? Is very important...thanks in advance.
did you use a scroll container/div?
Sometimes the users enclose the paintarea in another scrollable DIV.
In this case you should use the setViewPort ...or inspect the Viewport Demo.
I have seen a feature on a site I would like to emulate. I have intermediate php skill but am a novice javascript user. The feature is the site content displayed in divs which can be moved around on the screen and their position saved using cookies. This site: [url]www.nowgamer.com[/url] is where I saw it (latest podcasts, videos, reviews etc with filter)
How would I go about achieving this through javscript? I want to know how to connect javascript with the cookie so that the positions of the square divs are saved, as are the preferences of the content filter on each div. How can I achieve this?
Would this be a big job? Thank you for any help, I am working independently on this in my spare time so your contribution with advice is my lifeline.
As Zoidberg commented, its easy with JQuery or Yui, or any other javascript library that provides drag & drop functionality. They are almost easy to configure, checking at demo they give. They also expose certain events like beforeDrag, afterDrag, onDrop, etc. where you can fire a simple js function check the elements' dropped position store it in cookies. For setting cookies, there are world of code on internet.
Also, you might want to check floating absolute/relative positioning css, if your DOM divs are going to be floating around the page.
GoodLuck.
simplyharsh has the proper answer, but I'd like to expand on it a bit:
The basics of a draggable div aren't too complicated. You attach an onclick handler to initiate the dragging. Internally, that's accomplished by changing the div's CSS so it's position: absolute. Then you start monitoring mouse movements (basically onmousemove) and changing the div's top and left according to the movements you've captured.
Dropping is a bit more complicated. You can always just release the mouse and leave the div wherever you ended up moving it, but that leaves it absolutely positioned and therefore outside of normal document flow. But dropping it "inside" some other element means a lot of prep work.
Because of how mouseover/mouseout/mouseenter events work, they WON'T work while you're dragging an element - you've got your draggable div under the mouse at all times, so there's no mouseenter/leave events being fired on the rest of the page. jquery/mootools and the like work around it letting you specify drop zones. The locations/sizes of these zones are precalculated and as you're dragging. Then, as you're dragging, the dragged object's position is compared to these precalculated drop zone locations for every move event. If you "enter" one of those zones, then internally the libraries fire their mouseenter/mouseleave/mouseover events to simulate an actual mouseenter/leave/over event having occured.
If you drop inside a zone, the div gets attached as a child of that zone. If you drop outside, then it will usually "snap back" to where it was when you initiated the drag.
Resizing is somewhat similar, except you're adjusting height and width instead of top and left.
I am looking at creating a page that the user can move around as they please...very similar to iGoogle. But in addition, ideally, I want the user to be able to resize the components.
I've done quite a bit with jQuery in the past am not against the idea of using that, seeing as it already has the draggable and resizable options, though, there's still a fair amount of work involved.
So, before I start - I've done some googling with no success - is there some kind of widget out there that already does this that's available for free commercial use?
Thanks in advance.
You want jQuery UI if you've done quite a bit with jQuery:
Resizable
Sortable
Draggable