Make Div Draggable using CSS

This is the best you can do without JavaScript:

[draggable=true] {
  cursor: move;
}

.resizable {
  overflow: scroll;
  resize: both;
  max-width: 300px;
  max-height: 460px;
  border: 1px solid black;
  min-width: 50px;
  min-height: 50px;
  background-color: skyblue;
}

<div draggable="true" class="resizable"></div>

Demo

• draggable attribute on HTML5 Rocks
• CSS resize property on MDN

You can take a look at HTML 5, but I don't think you can restrict the area within you can drag it, just the destination:

http://www.w3schools.com/html/html5_draganddrop.asp

And if you don't mind using some great library, I would encourage you to try Dragula.

Only using css techniques this does not seem possible to me. But you could use jqueryui draggable:

$('#drag_me').draggable();

CSS is designed to describe the presentation of documents. It has a few features for changing that presentation in reaction to user interaction (primarily :hover for indicating that you are now pointing at something interactive).

Making something draggable isn't a simple matter of presentation. It is firmly in the territory of interactivity logic, which is handled by JavaScript.

What you want is not achievable.