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

4

0 回答 0