Как установить пользовательские ручки изменения размера с помощью jquery ui?

Я использую jquery ui, чтобы позволить изменять элементы страницы, но я бы хотел настроить пользовательские дескрипторы. Я пробовал то, что, как я думаю, должен работать, но это не так.

Основной html:

 <div id="element_x" class="resizable">
  <div id="overlay_x" class="element_buttons">
   <div id="resize_element_x" class="resize_element ui-resizable-handle ui-resizable-se"><img src="images/site/handle_resize.png" border=0 title="Resize this element" /></div>
  </div>
 </div>

Я установил его так:

   var reposition = '';
   $(function() {
    $( ".resizable" ).resizable({
     containment: "#viewPage",
     handles: {"e,s,se" : { e: '.ui-resizable-e', s: '.ui-resizable-s', se: '.ui-resizable-se'}},
     resize: function(event, ui){
       reposition = ui.position;
     }
    });
   });

Это создает правильный дескриптор в нужном месте, но когда я пытаюсь изменить размер, он просто ничего не делает! Может ли кто-нибудь увидеть, что неправильно, или предложить лучший способ сделать это?

Спасибо!

Ответы

Ответ 1

Согласно http://esbueno.noahstokes.com/post/426818005/jquery-ui-resizable-custom-handle-syntax, ваш настраиваемый синтаксис дескриптора неверен. Это работает для меня:

   var reposition = '';
   $(function() {
    $( ".resizable" ).resizable({
     containment: "#viewPage",
     handles: { 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'se': '.ui-resizable-se'},
     resize: function(event, ui){
       reposition = ui.position;
     }
    });
   });

Ответ 2

Решение не мое, но оно точно показывает, что проблема и решение:

<p><a href="#" onclick="location.href='http://bugs.jqueryui.com/ticket/4310'; return false;">jQuery UI #4310</a> - Custom resizable handles do not work unless the ui-resizable-xy and ui-resizable-handle classes are added.</p>

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="#" onclick="location.href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'; return false;" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>


<div class="container">
    <div class="border bottom_right ui-resizable-se ui-resizable-handle"></div>
</div>

<script>
    $(function() {
        $('.container').resizable({
           handles: { se: '.bottom_right' } 
        });
    });
</script>

Для меня это работает!:)

http://jsfiddle.net/tj_vantoll/pFfKz/