Custom Resizable Handles in JQuery UI

后端未结

关注

 6  1517

I\'ve been attempting to create a resizable textbox (ASP.NET multiline TextBox / HTML textarea) and use JQuery UI to make it resizable, but seem to

相关标签:

6条回答

没有蜡笔的小新

2020-12-08 17:23
Finally found an extremely effective solution after hours of trying to get over this annoying bug. Simply, append your handle element in the ui class. The function below has been tested and works fine with South and West handles. Hope that helps!
```
function resizables(element, handle, type){

 var height = handle.height();
 var place = type =="s"? "bottom":"top";
 var css = {};
        css["height"] = height+"px";
        css[place] = -height+"px";


 element.resizable({handles: type});
 var jqclass = element.find(".ui-resizable-"+type);

        handle.css({"cursor": type+"-resize"});
        jqclass.append(handle); 
        jqclass.css(css);
}
```
When you call the function like below, your custom handle will be placed in the right location and will work probably. PS: the function works with 'n' and 's' handles.
```
resizables($("#draggable"), $("#handle"), 's');
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

佛祖请我去吃肉

2020-12-08 17:23

I had a similar issue but my need was to set the hadlers dynamically to multiple elements:

            $.each($(".imagecontainer"),function() {
                $(this).resizable({
                    handles: {se: $(this).closest(".spaciator").find(".ui-resizable-se")}
                });
            };

0 讨论(0)

梦如初夏

2020-12-08 17:30
From a bit of digging I did in the jquery-ui code, I think I can confirm that a custom handle outside the resizable element doesn't work.

The problem is that the mouse events are initialized for the resizable element (or a wrapper element in the case of textarea). If the handle is not a child of where the mouse events are handled, it won't trigger the mousedown event on the handle, thus not making it draggable.

As a proof of concept I patched around a bit in jquery-ui until I got things to (sort of) work. No guarantees about the code, but it should point out what kind of changes would need to happen to make it work.

Around line 140 in ui.resizable.js I changed:
```
this._handles = $('.ui-resizable-handle', this.element)
    .disableSelection();
```
to
```
this._handles = $('.ui-resizable-handle')
    .disableSelection();
```
Then I added the following code (part of mouseInit from ui.core.js, probably should use the whole function) in ui.resizable.js (around line 180) after the mouseInit is called for the resizable element:
```
   ...
   //Initialize the mouse interaction
   this._mouseInit();

   // Add mouse events for the handles as well - ylebre
   for (i in this.handles) {
      $(this.handles[i]).bind('mousedown.resizable', function(event) {
        return self._mouseDown(event);
      });
   }
```
This allows me to make a resize handle that is not a child of the resizable element. My handle is a div with id 'south' and is attached to the resizable element. Here is the HTML snippit:
```
<textarea id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</textarea>
<div id="south" class="ui-resizable-handle">south</div>
```
And the javascript code:
```
    $("#resizable").resizable(
        {handles: {s: document.getElementById("south")}}
    );
```
Hope this helps!
0 讨论(0)
发布评论:

提交评论
- 加载中...

离开以前

2020-12-08 17:30

in 2020, this simple solution works..

$('.your-class').each(function (index) {
        $(this).resizable({
            handles: { e: $(this).find('.child-div .handle-resize-class') },

0 讨论(0)

忘了有多久

2020-12-08 17:33

Yeah, looks like a bug to me. Here's a complete sample, for those trying locally:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://jqueryui.com/latest/themes/base/ui.all.css" type="text/css"/>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.3.2.js" type="text/javascript"></script>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js" type="text/javascript"></script>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.resizable.js" type="text/javascript"></script>
  <style type="text/css">
    #resizable { width: 100px; height: 100px; background: silver; }
    #southgrip { width: 100px; height: 10px; background-color: blue; }
  </style>
  <script type="text/javascript">
    $(function() {
      $('#resizable').resizable({
        handles: { 's': $('#southgrip') },
        minHeight: 80,
        maxHeight: 400
      });
    });
  </script>
</head>
<body>

<div id="resizable"></div>
<div id="southgrip"></div>

</body>
</html>

This jQuery UI bug may be related.

Other things I tried:

Replace 'latest' with '1.6' and 'jquery-1.3.2' with 'jquery-1.2.6' to try with an older version of jQuery UI to see if it's a regression. Doesn't look like it.
Add ui-resizable-s and/or ui-resizable-handle CSS classes to #southgrip. No dice. However, if #southgrip is inside #resizable, it works. But, this doesn't solve your problem.
Using { 's': $('#southgrip').get(0) } for the handles option. No dice.

0 讨论(0)

攒了一身酷

2020-12-08 17:34

I had the same problem 4 years after. It sames they never fixed that. I though to use Interface but it did not have any updates since 2007. So I decided to fix the bug by myself and make a request pull in the jQuery UI project in Github. https://github.com/jquery/jquery-ui/pull/1134 I hope they accept it and merge it soon. I added a test so I'm sure it will work in any case because all the tests of resizable from Jquery UI works with this modification.

I started using ylebre code but it did not work. So I made some little changes.

0 讨论(0)
发布评论:

提交评论
- 加载中...