0
<div class='main' >
          <div class='panel panel-primary desktop-window'>
            <div class="panel-heading">Panel heading without title
                <div class='panel-tooltip'>
                      <a href="#" data-action="reload" class='btn btn-xs btn-success'>
                        <i class="fa fa-refresh" ></i>
                      </a>
                      <a href="#" data-action="collapse" class='btn btn-xs btn-primary'>
                        <i class="fa fa-chevron-down"></i>
                      </a>
                      <a href="#" data-action="close" class='btn btn-xs btn-danger'>
                        <i class="fa fa-power-off"></i>
                      </a>
                </div>
            </div>
            <div class="panel-body">
              Panel content
            </div>
          </div>
</div>

now what i need is to make this panel movable and resizeable and minimizable !

so i started with

var minimized=[];
$('[data-action="close"]').click(function(){
            $(this).closest('.desktop-window').remove();
        });
        $('[data-action="collapse"]').click(function(){
            if(!$(this).attr('restored')){
              var p=minimized.push($(this).closest('.desktop-window')) - 1;
              $(this).attr('restored',p);
              $('#active-windows').append("<a href='#' data-restore='"+p+"'  class='btn btn-xs btn-default' onclick='restore(this);'>RESTORE</a>");
            }else{
              p = $(this).attr('restored');
              $('#active-windows').append("<a href='#' data-restore='"+p+"'  class='btn btn-xs btn-default' onclick='restore(this);'>RESTORE</a>");
            }
            minimized[p].hide();
        });
function restore(e){minimized[$(e).data('restore')].show();e.remove();};

now the tricky part is how to move around and resize this thing !

for resize i tried

.desktop-window{ resize:both; }

but its not working for some reason :( any clues ?

as for moving around i dont want to use heavy jquery-ui since im already using bootstrap. so is there an easier way to do it with jquery+html5 alone ?

also even when i tried jqueryUi problem is that it takes the dom out of its location and append it to body, which is not what i want.

thanks for your time

Zalaboza
  • 8,899
  • 16
  • 77
  • 142
  • what do you mean by move around? Do users need to mousepress to move around? –  Feb 25 '14 at 11:50
  • div elements do not support the resize property but only for tags like textarea. You have to use jqueryUI for convenience even though there may be heavy load in the server. –  Feb 25 '14 at 11:52
  • @SuperCoolHandsomeGelBoy yp, move around = draggable, and thanks for explaing the resize problem – Zalaboza Feb 25 '14 at 12:01

0 Answers0