可以隨意拖拉的div，讓讀者更具主動性：easy jQuery

你可以拖拉下列三個Div，可以拉到任何地方。↓

Drag me around 01

Drag me around 02

Drag me around 03

jQuery & CSS:

<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
$(function() {
$( "#draggable01, #draggable02, #draggable03" ).draggable();

});
</script>

<style>
.div112901 {
font-family: Verdana, '微軟正黑體';
font-size: 1.12em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
padding: 0.5em;
letter-spacing: 0.1em;
margin: 0.5em;
}
</style>


HTML範例：

<div id="draggable01" class="div112901"
style="width: 100px; height: 100px; background-color: red;">
Drag me around<br>
</div>
<div id="draggable02" class="div112901"
style="width: 120px; height: 120px; background-color: green;">
Drag me around 02<br>
</div>
<div id="draggable03" class="div112901"
style="width: 380px; height: 230px; background-color: yellow;">
Drag me around 03<br>
<img style="width: 320px; height: 214px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8tlEjDU5BmPwhEP7vVAv63c2f4aCzEpyl5YnLkRVnGWmGtTTK3V7_6MeXknHSA0FpJ7-HNgVW8HVZCreEbpEFqNfgwaq6zDl1_i8cYwawMreWrvrTN0_FccORJgpHaUI1WyGdyexpdmo/w1121-h748-no/IMG_1927.JPG"><br>
</div>


說明：

1. div內一定要設 id ，同時 id 也要寫入 jQuery 裡面，如範例中紅色 字體。如果一個以上的 id，請用「,」隔開。