2013-08-20 3 views
1

Я хочу, чтобы мой div перетаскивал и изменял размер с помощью jquery. Вот простой ДИВ:jquery dialog draggable и resizable

<div id="dialog-modal-alerts" title="Alerts" style="display:none;"></div> 

и это, как я использую JQuery:

$("#dialog-modal-alerts").dialog({ 
      height: 500, 
      width: 900, 
      title: strTitle, 
      resizable:true, 
      draggable:true, 
      dialogClass: "alertDialog", 
      //buttons: [{ text: "Ok", click: function() { $(this).dialog("close"); } }], 
      close: function (event, ui) { closeDialog(number) }, 
      modal: true 
     }); 

И это не работает. Это работает, если я пишу

$(function() { 
     $("#dialog-modal-alerts").draggable(); 
    }); 

Но если я пишу

$(function() { 
     $("#dialog-modal-alerts").resizable(); 
    }); 

это все еще не работает Может кто-нибудь помочь с моим вопросом?

+0

Что вы ожидаете от того, как это должно работать? – benestar

+0

Я хочу перетащить мой div и изменить его размер. –

+0

По умолчанию диалоговое окно: http://jsfiddle.net/7RtL7/ – j08691

ответ

2

Вы проверили это? это по перетаскиваемом диалог по умолчанию и изменяемый

http://jqueryui.com/dialog/#modal

это о strTitle попытаться удалить его и добавить «Название» или что-нибудь и близко (номер) убедитесь, что номер и strTitle существует как действительные переменные.

я создал этот пример я работал отлично:

<div id="dialog-modal-alerts" title="Alerts" style="display:none;"> 

     Hlllo 
     Ahmed Alaa<br /> 

    </div> 

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
     $(function() { 
      $("#dialog-modal-alerts").dialog({ 
       height: 500, 
       width: 900, 
       title: 'Hi', 
       resizable: true, 
       draggable: true, 
       dialogClass: "alertDialog", 
       modal: true 
      }); 
     }); 

+0

Да, я это сделал. Как вы видите мой ответ выше, я полагаю, что он будет перетаскиваемым и изменяемым по размеру, но не –

+0

попытается удалить функцию перетаскивания и оставить изменяемый размер, возможно, что-то пойдет не так, когда добавьте оба –

+0

Я попробовал это, но он не работал ( –

0

Моя догадка, что есть что-то нарушается в одном из своих функций, которые вы не показали нам, возможно, ошибка синтаксиса, что не позволяет ему закончить код. Я говорю это, потому что я могу успешно выполнить ваш фрагмент и добиться желаемого поведения. Возможно, мой полный pastebin поможет.

Обратите внимание, что отдельно называя

$("#dialog-modal-alerts").draggable(); 

должен работать, так как это документировано метод JQuery UI. Вы можете отметить любой элемент как перетаскиваемый, независимо от того, является ли он модальным диалогом, и это то, что вы сделали.

С другой стороны,

$("#dialog-modal-alerts").resizable(); 

не будут работать, так как изменяемый не своя собственная функция.

+0

Спасибо, я попробую это. Но вы не знаете, что изменить размер не является функцией jquery? Перейдите по ссылке ниже: http://jqueryui.com/resizable/ –

+0

Я стою исправлена. –

Смежные вопросы