jquery-ui-resizable | 易学教程

Draggable Resizable not working in Chrome

阅读更多关于 Draggable Resizable not working in Chrome

问题 I am having some issue with making resizable and draggable work together on an image in chrome. My page has a list of (draggable) images on the side, which can be dropped on a div(the images are cloned). The dropped images should be resizable and draggable. I've written the following Javascript: $(function() { $(".scrollable").scrollable(); $(".draggable").draggable({ helper: 'clone', appendTo: 'body' }); $("#canvas").droppable({ accept: '.draggable', drop: function(e, ui){ if (ui.draggable

Draggable and resizable in JqueryUI for an image is not working?

阅读更多关于 Draggable and resizable in JqueryUI for an image is not working?

I used below code for dragging and resizing the image, <!DOCTYPE html> <html> <head lang="en"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/> <script type="text/javascript"> $(document).ready(function() { $( "#img_content" ).draggable().resizable(); }); </script> </head> <body class='default'>

How do I save the position of draggable & resizeable elements?

阅读更多关于 How do I save the position of draggable & resizeable elements?

问题 I'm building a site which allows users to create an html page which can then be saved and shared on another site. I want them to be able to resize and drag the page elements. I can do this using jQuery, but I'm not sure how I then save that so that when the page is viewed elsewhere, it looks the same. I haven't decided yet how to store the page info, but what I'm thinking is that I can store each element in the database along with its absolute position, and its contents. Does that sound like

How do I save the position of draggable & resizeable elements?

阅读更多关于 How do I save the position of draggable & resizeable elements?

I'm building a site which allows users to create an html page which can then be saved and shared on another site. I want them to be able to resize and drag the page elements. I can do this using jQuery, but I'm not sure how I then save that so that when the page is viewed elsewhere, it looks the same. I haven't decided yet how to store the page info, but what I'm thinking is that I can store each element in the database along with its absolute position, and its contents. Does that sound like a good plan? If so, how do I get the position for the div to pass to the php so that it can be saved?

Apply jQueryUI Resizable widget to dynamically created elements

阅读更多关于 Apply jQueryUI Resizable widget to dynamically created elements

This question is not about event delegation I would like to apply the jQuery resizable widget to a series of div tags that could potentially be created dynamically. Is there a way to use something that behaves like event delegation to dynamically add the jQuery resizable widget to new elements? Here's the example (notice how the newly created green elements cannot be resized): $(function() { var cols = $("#cols").children(".col"); cols.resizable({ maxHeight: 20, minHeight: 20, distance: 5, handles: 'e', start: function() { console.log("I've started!"); }, stop: function() { console.log("I've

How to know which handle is getting used in jquery resizable

阅读更多关于 How to know which handle is getting used in jquery resizable

i am using jquery resizable to resize a div $("#mainDiv").resizable({ handles: 's, e', start: function(event, ui) { // want to perform some action here }, resize: function(event, ui) { // want to perform some action here } }); now i want to do some stuff based on fact that whether s or e is selected to resize basically resizing is vertical or horizontal how to do that Thanks The axis is placed as data on your element under ui-resizable like this: $(element).data('ui-resizable').axis // the following will return direction as "n", "e", "s", "se" etc. $("#selector").resizable({ resize: function(e

jquery ui resizable left-bottom handle to resize

阅读更多关于 jquery ui resizable left-bottom handle to resize

问题 I am using jquery-ui-resizable plugin in my project. By default when you make a DOM Object jquery-ui-resizable the resizable handle will appear on right-bottom corner, I need the re-sizable handle on left-bottom corner. --- EDIT --- One more thing, it should not be re-sizable using right border but should be re-sizable using left border. 回答1: You should use the handles supported: { n, e, s, w, ne, se, sw, nw }. This will create the Handles on the side you specified. Default values are 'e, s,

How to resize ONLY horizontally or vertically with jQuery UI Resizable?

阅读更多关于 How to resize ONLY horizontally or vertically with jQuery UI Resizable?

The only solution I've found is to set the max and min height or width with the current value. Example: foo.resizable({ maxHeight: foo.height(), minHeight: foo.height() }); But this is really ugly, especially if I have to change the element's height programmatically. Nick Craver You could set the resize handles option to only show on the left and right (or east/west), like this: foo.resizable({ handles: 'e, w' }); You can give it a try here. cburgmer While the poster was mainly asking for a horizontal-only resize, the question does ask for vertical, too. The vertical case has a special issue:

Apply jQueryUI Resizable widget to dynamically created elements

阅读更多关于 Apply jQueryUI Resizable widget to dynamically created elements

问题 This question is not about event delegation I would like to apply the jQuery resizable widget to a series of div tags that could potentially be created dynamically. Is there a way to use something that behaves like event delegation to dynamically add the jQuery resizable widget to new elements? Here's the example (notice how the newly created green elements cannot be resized): $(function() { var cols = $("#cols").children(".col"); cols.resizable({ maxHeight: 20, minHeight: 20, distance: 5,

A full page layout with resizable panes using jQuery UI

阅读更多关于 A full page layout with resizable panes using jQuery UI

I'm trying to create the overall layout of a webapp. The app is full-screen and has a fixed header and three columns/panes. The center pane consists of two rows: The panes should be resizable through dragging the pane edges with the mouse (see arrows in image above). The individual panes have should have vertical scrollbars in case of overflowing content, that is, no global browser window scrollbar. Using jQuery and jQuery UI Resizable, I've created this (partly working) JSFiddle . HTML: <div class="header"> Fixed header </div> <div class="wrapper"> <div class="inner-wrapper"> <div class="left