JQuery-UI перетаскиваемый и изменяемый размер div не может изменить размер слева правильно

Question

JQuery-UI перетаскиваемый и изменяемый размер div не может изменить размер слева правильно

0

Я пытаюсь сделать изменяемый размер и перетаскиваемый div, который находится в фиксированном положении. Div отлично смотрится, когда я изменяю его размер справа или снизу; однако, когда я изменяю его размер слева или сверху, перетаскиваемый div, кажется, увеличивает высоту/вес в противоположном положении.

Вот код: HTML

<div id="draggableDiv" >
  <div id="resizableDiv">
    <div id="content"><div id="contentTitle"></div></div>
  </div>
</div>

JS:

 $('#draggableDiv').draggable({
    handle: '#contentTitle'
  });
  $("#resizableDiv").resizable({
    handles: 'n, e, s, w, ne, se, sw, nw'
  });

CSS:

  #draggableDiv {
     position:fixed !important;
     width:auto;
     height:auto;
     left:100px;
     top: 100px;
   }

   #resizableDiv {
     height: 200px;
     width: 200px;
   }

   #content { height:100%; width:100%; }

Что я должен сделать, чтобы перетаскиваемый div правильно изменил размер?

user959974 02 дек. 2013, в 21:17

Источник

Теги:

javascript

jquery

html

css

jquery-ui

2 ответа

1

Вы можете применить jquery draggable & resizable к родительскому контейнеру, это отлично работает.

$('#draggableDiv').draggable({
   handle: '#contentTitle'
}).resizable({
   handles: 'n, e, s, w, ne, se, sw, nw'
});

BTW Я сделал Jsfiddle, где вы можете проверить, что
http://jsfiddle.net/kQtMF/

Bryan Azofeifa 02 дек. 2013, в 18:35

Ещё вопросы

melc · Accepted Answer · 2013-12-02T18-40-00.000Z

Вам необходимо изменить внешний контейнер #draggableDiv. Если вы это сделаете, вам также потребуется немного изменить ваш css, чтобы установить этот div в нужные размеры. Например,

http://jsfiddle.net/RkNT4/

HTML

<div id="draggableDiv">
    <div id="resizableDiv">
        <div id="content">
            <div id="contentTitle">content title</div>
            conteeeeeent
        </div>
    </div>
</div>

JS

$('#draggableDiv').draggable({
    handle: '#contentTitle'
});
$("#draggableDiv").resizable({
    handles: 'n, e, s, w, ne, se, sw, nw'
});

CSS

/*colors were added for the example to separate each div*/
    #draggableDiv {
        position:fixed !important;
        width:auto;
        height:auto;
        left:100px;
        top: 100px;
        background-color:green;
        height:200px;
        width:200px;
    }
    #contentTitle{
        background-color:red;
        cursor:move;
    }
    #resizableDiv {
        height: 100%;
        width: 100%;
    }
    #content {
        height:100%;
        width:100%;
        background-color:blue;
    }

Я пробовал это раньше, и это не сработало. Тем не менее, это волшебно работает сейчас. Спасибо