Feb
07
2015
by eidam

Draggable and Resizable without jqueryUI

I was searching for possibilities to build “windows-like” div’s without the need of importing jquery UI. I found out, there are still not a lot of alternatives when comes to jquery UI and therefore I could find a way to do it by my own.

At the begginig, here is my html code:

 

RESIZABLE

Actually, making div resizable is very easy and you would need only two lines of css:

 

DRAGGABLE

The real problem should be to build your div’s interaction, so when holding .handler element, all .draggable is moving.For this task, I used jquery. To initialize action :

 

 

Inside the mousemove listener, I put code to change css rules for position, values from position of mouse. I also changed the class of dragged divs to be able to manipulate css:

 

window.getSelection().removeAllRanges() unselects all what was selected by moving the div, what should be sometimes a little bit annoying.

I am always moving dragged div to the position, so mouse is in the middle of handler. This is not the ideal case, but it is easy to write. The harder way should be to get relative position of mouse inside the handler and then trying to preserve that values.

 

At this point, I should add a function to stop dragging. Firstly, event listeners for this action:

 

…and now the function itself:

 

 

$(this).off(‘mousemove’) will turn off listener for mousemove. That means, our moving action will stop until one click on the handler again.

 

The another problem should be z-index of our dragged div. As we manipulate with “dragging” class, we should just add some css rules:

 

 

 

Working example of this is here:

 

See the Pen Draggable Resizable without jquery ui by Eidam (@eidam61) on CodePen.